如何将选定的复选框ID值从视图传递到控制器

Question

我是spring-boot和thymelaf的新手，

我在一个带有复选框的表中有一个图书列表，我不知道如何将所选图书ID从视图传递到控制器，并由借阅或归还BTTON使用它们？你能帮忙吗？

这是我的Html文件https://wtools.io/paste-code/b5g4这是我的书服务实现的相关部分：

public void borrowBook(String userEmail, String bookIds, Model model) {
if (!CollectionUtils.isEmpty(books)) {
User user = userRepository.findByEmail(userEmail);
List<String> requestedBooks = getRequestedBookIds(bookIds);
List<Book> borrowedBooks = new ArrayList<>();
List<Book> invalidBooks = new ArrayList<>();
for (Book book : books) {
if (requestedBooks.contains(book.getId()) && !book.isBorrowed() && user != null) {
book.setBorrowed(true);
book.setBorrowedBy(user.getFirstName());
borrowedBooks.add(book);
model.addAttribute("bookStatus", "Book BOrrowed By " + user.getFirstName());
} else {
invalidBooks.add(book);
model.addAttribute("bookStatus", "No Books are available");
}
}
model.addAttribute("inValidBooks", invalidBooks);
model.addAttribute("bookList", borrowedBooks);
}
}
@SuppressWarnings("unchecked")
private List<String> getRequestedBookIds(String bookIds) {
List<String> requestedBookIds = null;
try {
requestedBookIds = new ObjectMapper().readValue(bookIds, ArrayList.class);
} catch (Exception e) {
e.printStackTrace();
}
return !CollectionUtils.isEmpty(requestedBookIds) ? requestedBookIds : new ArrayList<>();
}

这是来自控制器：

@GetMapping(value = "/available", produces = MediaType.APPLICATION_JSON_VALUE)
public String getAvailableFreeBooks(Model model) {
List<Book> availableBooks= bookService.getAllAvailaBooks();
model.addAttribute("listBooks", availableBooks);
return "available_books";
}

Answer 1

在您的html中，您可能会：

<input type="checkbox" th:field="*{requestedBooks}" value="${book.getId}">

• 省略id(如果您不需要的话(
• 使用th:field(而不是name(
• 将value设置为当前图书的id

在您的控制器中：requestedBooks(@ModelAttribute("requestedBooks") List<String> requestedBooks(将(应该(包含所有检查的图书ID。

参考编号：https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#checkbox-字段

---

示例存储库：

https://github.com/xerx593/soq67602860

更新：

为了处理客户端(jquery(的复选框，你可以获得一组id，比如：

<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#btnBorrow").click(function() {
var reqBookIds = new Array();
$('input[name="requestedBooks"]:checked').each(function() {
reqBookIds .push(this.value);
});
alert("Number of selected Books: "+reqBookIds .length+"n"+"And, they are: "+reqBookIds);
// do stuff with reqBookIds ...
)};
}); 
</script>

使用上面提到的<input type="checkbox" .../>(考虑<input/>应该在<form/>内！！(和类似的按钮

<button id="btnBorrow">Borrow</button>

userEmail必须来自客户端？？？