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对象,方法如下
使用$("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
有一种场景是,字段大部分在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
相关文章推荐
- JS将form表单转换为json数据,使用ajax发送请求案例
- C# 将json字符串转换为键值对形式,用于执行form表单形式的请求
- spring mvc当表单请求为application/json或enctype="multipart/form-data 过滤请求值参数,取不到请求参数问题
- ajax提交form表单数据serialize转为JSON
- form表单转换为json格式,支持数组
- Form表单中的button导致页面刷新而无法进入Ajax请求回调函数
- JQuery将form表单值转换成json字符串函数
- jquery序列化form表单使用ajax提交后处理返回的json数据
- android利用httpclient实现post、get请求restful接口进行json和form表单数据提交等公共方法类
- 将form请求数据转换为json的方法
- form表单转换为json对象
- 上传文件,使用FormData进行Ajax请求,jsoncallback跨域
- jquery-ajax请求后台数据转换json显示在select下拉列表
- jquery序列化form表单使用ajax提交后处理返回的json数据
- ajax请求(二),后台返回的JSon字符串的转换
- axios post请求数据,在Content-Type为application/x-www-form-urlencoded情况下,data如何转换为json的解决办法
- 关于使用ajax请求servletList转换Json抛的异常There is a cycle in the hierarchy!暨将List转换为JSONArray问题解决!
- jquery序列化form表单使用ajax提交后处理返回的json数据
- 构造AJAX参数, 表单元素JSON相互转换
- form表单转换为Json数据