ajax - 如何通过 ajax 调用将 HTML 表单提交中的表数据发送到 Spring MVC 控制器
问题描述
假设我有一个类似于此格式的 HTML 表格
<form> <table id="a">
<thead>
<th>Name</th>
<th>Series</th>
<th>Value</th>
</thead>
<tbody id="b">
<tr><td>Enhancer</td><td>Enhancement</td><td>50</td></tr>
<tr><td>Plans</td><td>Plan</td><td>50</td></tr>
</tbody>
</table>
<input type="submit" value="Send" action="SomeControllerAction" /></form>
在 "Name","Series" 和 "Value" 标题下有两行。
我需要通过表单将这些数据发送到带有Ajax的Spring 控制器,在该控制器中我可以在模型中迭代地获取或设置每一行的值。我不知道如何实现这一点。这就是如何将表中的数据发送到 spring 控制器方法并获取值。
帮助处理代码段!谢谢
解决方案
虽然前面的答案是正确的,但我还是建议引入一个包含三个字段的类name
:series
和value
。这个类应该有一个有意义的名字。在这里我命名它MyObject
是因为我不知道你的应用程序是关于什么的。
我的对象:
public class MyObject {
private String name, series;
private Integer value;
// Getters and setters
}
控制器(返回类型可能不同)
@PostMapping("/series")
@ResponseBody
public List<MyObject> postSeries(@RequestBody List<MyObject> myObjects) {
myObjects.forEach(System.out::println);
// Handle myObjects
return myObjects;
}
JSP
<table id="tableMyObjects">
<thead id="a">
<tr>
<th>Name</th>
<th>Series</th>
<th>Value</th>
</tr>
</thead>
<tbody id="b">
<tr>
<td><input type="text" name="name" /></td>
<td><input type="text" name="series" /></td>
<td><input type="text" name="value" /></td>
</tr>
<tr>
<td><input type="text" name="name" /></td>
<td><input type="text" name="series" /></td>
<td><input type="text" name="value" /></td>
</tr>
</tbody>
</table>
<button id="postButton">Post myObjects</button>
jQuery
$('#postButton').click(function() {
var myObjects = [];
$('#b tr').each(function(index, item) {
var $item = $(item);
myObjects.push({
name: $item.find("td input[name='name']").val(),
series: $item.find("td input[name='series']").val(),
value: $item.find("td input[name='value']").val(),
});
});
$.ajax({
url: '/series',
method: 'POST',
contentType : 'application/json; charset=utf-8',
data: JSON.stringify(myObjects)
})
.done(function(myObjects) {
// handle success
})
.fail(function() {
// handle fail
});
});
推荐阅读
- python - 将 Pandas 数据框中的所有 NaT 值更改为 Timedelta 00:00:00
- python - Python 可以直接读取 Hive 表吗?
- mysql - 每小时的分钟
- identityserver4 - Extended IdentityServer4 Asp.NetCore 重定向到登录页面
- python - 为重命名清理文件名
- python - PYTHON:TypeError:“NoneType”对象没有 TESTCASE 的属性“__getitem__”
- html - json,Angular 6中不存在表单组下拉菜单内容
- python - Pandas – 最后 x 列中的最小值
- c# - ASP.NET Core 与 ESP32 保持连接
- c - 将数据存储在列表 c 中