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

在使用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 
 

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

猜你喜欢