Ajax 调用表单的第二个提交按钮
Ajax call for second submit button of a form
我正在使用 spring boot 和 thymeleaf。
设法在单击第一个提交按钮时调用 spring 控制器方法。
我正在尝试在点击第二个提交按钮时调用 Ajax,我该如何实现?
Ajax 调用第二个提交按钮
$(document).ready(function() {
$("#download").click(function() {
var checked = [];
$('.checkbox:checked').each(function() {
checked.push($(this).val());
});
console.log(checked);
$.ajax({
type: "POST",
url: "selectedsalesDownload",
data: {
name: checked
},
success: function(msg) {
console.log(mgs);
alert(msg);
}
});
});
});
<form name="salesList" th:action="@{/selectedsales}" th:object="${sales}" method="post">
<div class="container">
<hr>
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th>SELECT</th>
<th>Mandy Name</th>
<th>GSTIN</th>
</tr>
</thead>
<tbody>
<tr id="salesDataTable" th:each="tempSales:${sales}">
<td>
<input class="checkbox" type="checkbox" th:name="selected" th:value="${tempSales.ID}" />
</td>
<td th:text="${tempSales.mandyName}"></td>
<td th:text="${tempSales.gstin}"></td>
</tr>
</tbody>
</table>
<div>
<input type="submit" value="SELECT" name="submit" class="btn btn-primary btn-sm mb-3" />
<input id="download" type="submit" value="DOWNLOAD" name="download" class="btn btn-primary btn-sm mb-3" />
</div>
</div>
</form>
第一次提交按钮的控制器方法
@PostMapping("/selectedsales")
public String selectedSales(
@RequestParam(value = "selected", required = false) List<Integer> selectedList,
Model model
) {
//...
}
第二个提交按钮的控制器方法
@RequestMapping(value = "/selectedsalesDownload")
@ResponseBody
public String toDownload(@RequestParam("name") List<Integer> list) {
return "msg";
}
我无法通过单击第二个提交按钮进入控制器中的“toDownload”方法,而是进入第一个提交按钮控制器方法“selectedSales”。
而且我还需要将存储在 javascript 数组变量“checked”中的复选框值发送到 spring 控制器方法“toDownload”。
需要解决方案。
为什么需要两个提交按钮?哪一位实际填写了表格?
将以下代码添加到您的 JS 将立即解决问题,但最终您确实应该将其中一个提交输入也更改为 type="button"
。这将阻止表单元素的默认功能,然后您可以用自己的代码覆盖它:
$("form").submit(function(){
event.preventDefault();
// Your other code to execute on form submission
});
这里有两件事...
您没有阻止第二个提交按钮正常提交表单。使用 按钮 类型...
<input id="download" type="button" ... />
或者确保阻止默认事件操作
$("#download").on("click", function(e) {
e.preventDefault()
// and so on
})
@RequestParam
列表参数应使用以下格式发送以获得最大的兼容性
name=1&name=2&name=3...
不幸的是,jQuery 的默认值是
name[]=1&name[]=2&name[]=3...
可能是为了与 PHP 兼容。您可以通过 traditional
选项
更改此设置
$.ajax({
method: "POST",
url: "selectedsalesDownload",
data: {
name: checked
},
traditional: true, // note the value here
success: function(msg) {
console.log(mgs);
alert(msg);
}
});
见https://api.jquery.com/jquery.ajax/ and more specifically https://api.jquery.com/jQuery.param/
我正在使用 spring boot 和 thymeleaf。 设法在单击第一个提交按钮时调用 spring 控制器方法。 我正在尝试在点击第二个提交按钮时调用 Ajax,我该如何实现?
Ajax 调用第二个提交按钮
$(document).ready(function() {
$("#download").click(function() {
var checked = [];
$('.checkbox:checked').each(function() {
checked.push($(this).val());
});
console.log(checked);
$.ajax({
type: "POST",
url: "selectedsalesDownload",
data: {
name: checked
},
success: function(msg) {
console.log(mgs);
alert(msg);
}
});
});
});
<form name="salesList" th:action="@{/selectedsales}" th:object="${sales}" method="post">
<div class="container">
<hr>
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th>SELECT</th>
<th>Mandy Name</th>
<th>GSTIN</th>
</tr>
</thead>
<tbody>
<tr id="salesDataTable" th:each="tempSales:${sales}">
<td>
<input class="checkbox" type="checkbox" th:name="selected" th:value="${tempSales.ID}" />
</td>
<td th:text="${tempSales.mandyName}"></td>
<td th:text="${tempSales.gstin}"></td>
</tr>
</tbody>
</table>
<div>
<input type="submit" value="SELECT" name="submit" class="btn btn-primary btn-sm mb-3" />
<input id="download" type="submit" value="DOWNLOAD" name="download" class="btn btn-primary btn-sm mb-3" />
</div>
</div>
</form>
第一次提交按钮的控制器方法
@PostMapping("/selectedsales")
public String selectedSales(
@RequestParam(value = "selected", required = false) List<Integer> selectedList,
Model model
) {
//...
}
第二个提交按钮的控制器方法
@RequestMapping(value = "/selectedsalesDownload")
@ResponseBody
public String toDownload(@RequestParam("name") List<Integer> list) {
return "msg";
}
我无法通过单击第二个提交按钮进入控制器中的“toDownload”方法,而是进入第一个提交按钮控制器方法“selectedSales”。
而且我还需要将存储在 javascript 数组变量“checked”中的复选框值发送到 spring 控制器方法“toDownload”。
需要解决方案。
为什么需要两个提交按钮?哪一位实际填写了表格?
将以下代码添加到您的 JS 将立即解决问题,但最终您确实应该将其中一个提交输入也更改为 type="button"
。这将阻止表单元素的默认功能,然后您可以用自己的代码覆盖它:
$("form").submit(function(){
event.preventDefault();
// Your other code to execute on form submission
});
这里有两件事...
您没有阻止第二个提交按钮正常提交表单。使用 按钮 类型...
<input id="download" type="button" ... />
或者确保阻止默认事件操作
$("#download").on("click", function(e) { e.preventDefault() // and so on })
@RequestParam
列表参数应使用以下格式发送以获得最大的兼容性name=1&name=2&name=3...
不幸的是,jQuery 的默认值是
name[]=1&name[]=2&name[]=3...
可能是为了与 PHP 兼容。您可以通过
更改此设置traditional
选项$.ajax({ method: "POST", url: "selectedsalesDownload", data: { name: checked }, traditional: true, // note the value here success: function(msg) { console.log(mgs); alert(msg); } });
见https://api.jquery.com/jquery.ajax/ and more specifically https://api.jquery.com/jQuery.param/