【发布时间】：2019-11-03 23:08:14
【问题描述】：
我有一组复选框，它们都具有相同的名称，我提交给 Spring Boot 控制器。我使用从数据库接收的数据使用 Jquery/Ajax 构建一个 Bootstrap DataTable，并测试我是否应该在页面加载时选中该复选框。我通过使用以下代码来做到这一点：
if (data['isChecked'] == "1") {
return "<input type='checkbox' name='fieldIdList' value='1_' checked>";
} else {
return "<input type='checkbox' name='fieldIdList' value='1_'>";
}
此代码循环，因此下一个复选框值将是 2_ 和下一个 3_，等等。
当页面加载时，表格显示 10 行，我的前 2 个复选框显示为选中状态。这是正确的。
现在，当我提交此表单而不将任何复选框的状态更改为下面的控制器代码时：
@RequestMapping(value = "/admin/dataTable", method = RequestMethod.POST)
public String postDataTable(@RequestParam("fieldIdList") List<String> fieldIdList){
return "";
}
我的 fieldIdList 中有 2 个条目：
“1_”
“2_”
这是正确的，因为只有我的前 2 个复选框被选中。但是当我取消选中任何复选框并再次提交时，我得到了一个有趣的结果。在下面的示例中，我取消选中第二个复选框，然后再次提交表单，我在 fieldIdList 中的条目：
“1_”
“1_”
“1_”
“2_”
通过取消选中第二个复选框并提交，我怀疑我的 fieldIdList 中只有 1 个条目为“1_”
同样在我提交后，页面被重定向到上一个页面，所以当我再次进入这个页面时，所有的列表都被加载为新的，所以它们中不会有以前的值。
不确定这是 Jquery/Ajax 问题还是 Java 问题，或者只是椅子和笔记本电脑之间的对象的问题 :)
因为DataTable是分页的，为了获取DataTable的所有行，我不得不在下面添加这段代码。不确定这是否是导致问题的原因。
// Handle form submission event
$('#manageFormFields').on('submit', function (e) {
var dataTable = $('#formFieldsDataTable').DataTable();
var form = this;
// Iterate over all checkboxes in the table
var tableData = dataTable.$('input, select').serializeArray();
$(form).append(tableData);
$.each(tableData, function () {
// If element doesn't exist in DOM
if (!$.contains(document, form[this.name])) {
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
});
});
生成的 HTML：
感谢您的宝贵时间。
【问题讨论】：
-
如何构建提交给 RestController 的数据？
-
页面加载完成后，DataTable 完成后，它是一个纯 HTML 表单，以指定值 = "/admin/dataTable" 的形式提交到 URL。但是，我必须放置一段代码来处理提交。因为 DataTable 是可分页的，所以我必须添加这段代码才能在提交之前获取所有行。我现在将其添加到问题中。
-
你调试过你的代码吗？并查看了生成的 HTML 页面？
-
是的，我现在将生成的 HTML 添加到问题中
-
问题似乎来自
$('#manageFormFields').on('submit', function (e) {代码段。如果我在if (!$.contains(document, form[this.name])) {之前添加if(this.name != "fieldIdList")，那么它可以100% 工作。不确定这是否正确，所以我现在将继续使用它，但将问题留给别人帮助我解决这个问题。 tableData 被附加到表单中，因此它应该在 DOM 中，而不是进入if (!$.contains(document, form[this.name])) {语句。
标签： javascript arrays spring-boot checkbox