前端代码:
<form id="person_add" method="post" action="user">
<table class="table_add">
<tr>
<td>
</td>
<td>name:</td>
<td><input name="name" value=""/></td>
<td>address</td>
<td><input name="address" value=""/></td>
</tr>
<tr>
<td></td>
<td>name:</td>
<td><input name="name" value=""/></td>
<td>address</td>
<td><input name="address" value=""/></td>
</tr>
<tr>
<td></td>
<td>name:</td>
<td><input name="name" value=""/></td>
<td>address</td>
<td><input name="address" value=""/></td>
</tr>
<tr>
<td></td>
<td>name:</td>
<td><input name="name" value=""/></td>
<td>address</td>
<td><input name="address" value=""/></td>
</tr>
<tr align="center">
<td colspan="5">
<a id="menu_submit" href="javascript:onSubmit()">提交</a>
<a id="menu_no" href="javascript:closeDialog()">关闭</a>
</td>
</tr>
</table>
</form>
Controller代码:
@PutMapping
public void addUser(@RequestBody List<Person> persons){
System.out.println(persons.toString());
}
如果后台使用Controller这样接收参数,那么必须传递进来参数如下格式:
[{"name":"1","address":"a1"},{"name":"2","address":"b1"},{"name":"3","address":"c1"},{"name":"4","address":"d1"}]
首先对表单进行序列化,
$.serializeObject = function (form) {
var o = {};
$.each(form.serializeArray(), function (index) {
if (o[this['name']]) {
if ($.isArray(o[this['name']])) {
o[this['name']].push(this['value']);
} else {
o[this['name']] = [o[this['name']], this['value']];
}
} else {
o[this['name']] = this['value'];
}
});
return o;
};
序列化之后的表单是一个对象,通过调用,得到一个对象
var serializeArray = $.serializeObject($("#person_add"));
将对象分解成为我们需要的json字符串,JSON.stringify() 将对象转为字符串
// 计算json内部的数组最大长度,必须要有这一步
for (var item in serializeArray) {
var tmp = $.isArray(serializeArray[item]) ? serializeArray[item].length : 1;
vCount = (tmp > vCount) ? tmp : vCount;
} if (vCount > 1) {
var jsonData2 = new Array();
for (var i = 0; i < vCount; i++) {
var jsonObj = {};
for (var item in serializeArray) {
jsonObj[item] = serializeArray[item][i];
}
jsonData2.push(jsonObj);
}
jsonParams=JSON.stringify(jsonData2);
} else {
jsonParams=JSON.stringify(serializeArray);
};
console.info(jsonParams);
得到的jsonParams就是我们需要的json字符串
通过ajax直接上传即可:
$.ajax({
url: "user",
method: "PUT",
contentType: "application/json; charset=utf-8",
data: jsonParams,
success: function (res) {
alert(res);
}
})
【springmvc】之使用jQuery接收前端传入List对象的更多相关文章
-
SpringMVC接收前端传值有哪些方式?
有很多种,比如: 1.通过@RequestParam注解接收请求参数: 2.通过Bean封装,接收多个请求参数 3.通过@ModelAttribute绑定接收前端表单数据 4.通过@PathVaria ...
-
(转)springMVC框架下JQuery传递并解析Json数据
springMVC框架下JQuery传递并解析Json数据 json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位.Json的语法非常简单,采用的是键值对表示形式.JSON 可以 ...
-
使用JQuery将前端form表单数据转换为JSON字符串传递到后台处理
一般地,我们在处理表单(form表单哦)数据时,传输对象或字符串到后台,Spring MVC或SpringBoot的Controller接收时使用一个对象作为参数就可以被正常接收并封装到对象中.这种方 ...
-
spring MVC 如何接收前台传入的JSON对象数组并处理
spring MVC 如何接收前台传入的JSON对象数组 主要方法: (主要用到的包是 net.sf.json 即:json-lib-2.3-jdk15.jar 完整相关jar包: commons- ...
-
spring MVC 如何接收前台传入的JSON对象数组
spring MVC 如何接收前台传入的JSON对象数组 主要方法: (主要用到的包是 net.sf.json 即:json-lib-2.3-jdk15.jar 完整相关jar包: commons- ...
-
springMVC框架下JQuery传递并解析Json数据
springMVC框架下JQuery传递并解析Json数据
-
MVC应用程序使用jQuery接收Url的参数
在这个练习<MVC应用jQuery动态产生数据>http://www.cnblogs.com/insus/p/3410138.html 中,学会了使用jQuery创建url链接,并设置了参 ...
-
【转】jQuery之前端国际化jQuery.i18n.properties
jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties
-
基于JQuery的前端form表单操作
Jquery的前端表单操作: jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...
随机推荐
-
js出错总结
1 没有</script> src="js" "./js" "../js"2 dom对象与jquery对象(jquery对象其 ...
-
tab切换-2016.6.4
以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...
-
不可或缺 Windows Native (25) - C++: windows app native, android app native, ios app native
[源码下载] 不可或缺 Windows Native (25) - C++: windows app native, android app native, ios app native 作者:web ...
-
题目1006:ZOJ问题
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:13212 解决:2214 题目描述: 对给定的字符串(只包含'z','o','j'三种字符),判断他是否能AC. 是否AC的规则如下:1. ...
-
Progress Reporting
Progress reporting is a key activity of project management. The project manager issues regular repor ...
-
oracle中行转列函数
一.问题描述 有时在“相关子查询中”需要查询某个实体类对应的某个字段有多个值,如果不做行专列查询,会提示返回多个列的错误.例如: 如上图所示,一个组合包,可能对应多个产品,需要你将所对应的多个产品都放 ...
-
innodb_strict_mode=1
从MySQL5.5.X版本开始,你可以开启InnoDB严格检查模式,尤其采用了页数据压缩功能后,最好是开启该功能.开启此功能后,当创建表(CREATE TABLE).更改表(ALTER TABLE)和 ...
-
Intellij IDEA 14的注册码
IntelliJ IDEA 14 注册码 IntelliJ IDEA 14 下载地址: IntelliJ IDEA 14 下载 分享几个license: (1) key:IDEA value:6115 ...
-
带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
-
ios-上拉电阻负载许多其他接口
想尝试拉加载意识到有多少开始了他的研究之旅,我看了两天做出最终的界面. 之所以这么慢是由于,我不知道要将上拉出现的view放在哪.就能在scrollView拉究竟部的时候被拉出来.还有就是怎么拉出来之 ...