您的位置:首页 > 编程语言 > Java开发

spring mvc ajax请求form表单转换成json

2017-12-07 14:21 465 查看
在使用jquery发送ajax请求的时候,通过jquery的serialize()方法对表单进行处理发送到服务端是比较方便的。

有一种场景是,字段大部分在form表单下,个别字段需要组装,

如果需要组装的字段比较简单,可以使用serializeArray()将form序列化成array之后通过objList.push({name:"id",value:"999"})的方式添加,

相当于新增了一个<input name="id" value="99"> 的表单元素。

如果是复杂的对象,这么拼接会出现以下问题。

1、从Chrome里面查看对象是一个object,name和value分别对应form表单里面元素的name和value。



2、当页面向服务器发送请求的时候,查看发送的请求,字段值显示[object Object]



  3、接着问题就来了,后台提示接收到的参数 businessArea失败,仔细看一下发送的form表单



仔细看,就是这么传过去了。。。这就想起来,以前表单里面添加List类型的对象的时候,html的name标签经常就是user[0].id user[1].id 以这种方式组装的。

现在看这种方法行不通。

4、如果自己拼接form表单感觉太麻烦,比较方便的解决方案还是有的,我们可以改成application/json的形式提交,首先要将form表单序列化成json对象,方法如下

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};


使用$("form").serializeObject()方法后form表单内的元素就可以序列化成json对象发送给后台。

这时如果我们需要对form表单新增参数,直接  data["name"] = addedObj 即可。

同时ajax添加请求参数contentType:'application/json',

5、服务端开发框架是 springCloud,在直接接收form表单时是不需要@RequestBody标签的,

    当请求头改为 Accept:application/json后,服务端需要打上@RequestBody标签。

     自此问题解决。

参考了一篇spring mvc 接收参数的文章

http://blog.csdn.net/LostSh/article/details/68923874
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ajax jquery 表单 json