form表单提交json格式数据

您所在的位置：网站首页 › js提交post请求并传入json › form表单提交json格式数据

form表单提交json格式数据

2023-10-05 16:12| 来源: 网络整理| 查看: 265

参考自 jQuery实现ajax提交form表单（可以是提交json），用springmvc接收。图文详解

个人实践整理。

方式一：

发送数据

//发送表单ajax请求 $(':submit').on('click',function(){ $.ajax({ url:"buy", type:"POST", data:JSON.stringify($('form').serializeObject()), contentType:"application/json", //缺失会出现URL编码，无法转成json对象 success:function(){ alert("成功"); } }); }); /** * 自动将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; };

contentType:”application/json”不能缺失，缺失数据会成为URL编码，造成无法转成json对象，后台接收的内容如下

String: %7B%22huohao%22%3A%22234%22%2C%22changjia%22%3A%221234%22%2C%22yanse%22%3A%22%22%2C%22xiangshu%22%3A%22%22%2C%22shuangshu%22%3A%22%22%2C%22jinjia%22%3A%22%22%2C%22riqi%22%3A%22%22%2C%22shoujia%22%3A%22%22%2C%22beizhu%22%3A%22asdf%22%7D=

controller接收

@RequestMapping(value = "/buy") public void addBuy(@RequestBody String buyAdd){ System.out.println("String: "+buyAdd); BuyAdd add = JSON.parseObject(buyAdd, BuyAdd.class); //此处用的FastJson转换为对象 System.out.println("**************"); System.out.println("Object: "+add); System.out.println("=============================="); }

接收显示为

String: {"huohao":"111","changjia":"222","yanse":"33","xiangshu":"","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":"aaa"} ************** Object: BuyAdd{huohao='111', changjia='222', yanse='33', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='aaa'} ==============================

声明：这里我用的是FastJson转换，因为@RequestBody并不支持FastJson，所以进行的手动转换。Jackson可以直接用@RequestBody对象类型自动转换（即addBuy(@RequestBody BuyAdd buyAdd)）。

此处记录一种特殊需求，表单传递的为多个相同对象用上述方式是这种结果

String: {"huohao":["5678","4567"],"changjia":["978","9678"],"yanse":"","xiangshu":"","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":""}

两个对象合并为一个json发送过去，后台解析会很麻烦这里我将form表单封装成json对象的方法进行了更改，使其最后为json对象的集合，后台可以直接读取集合进行解析

/** * 自动将form表单封装成json对象 */ $.fn.serializeObject = function() { var list = []; var o = {}; var a = this.serializeArray(); $.each(a, function() { if (!o[this.name] && o[this.name]!='') { o[this.name] = this.value || ''; } else { list.push(o); o={}; o[this.name] = this.value || ''; } }); list.push(o); return list; };

controller

@RequestMapping(value = "/buy") public void addBuy(@RequestBody String requestAddBuy){ System.out.println("String: "+ requestAddBuy); List addBuy = JSON.parseArray(requestAddBuy, RequestAddBuy.class); System.out.println(addBuy); }

最后的结果

String: [{"huohao":"54674","changjia":"78i","yanse":"","xiangshu":"","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":""},{"huohao":"457","changjia":"","yanse":"","xiangshu":"457","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":"678ur7t"}] [RequestAddBuy{huohao='54674', changjia='78i', yanse='', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu=''}, RequestAddBuy{huohao='457', changjia='', yanse='', xiangshu='457', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='678ur7t'}]

声明：这里同样是存在FastJson的问题，如果用Jackson则可以把controller改为addBuy(@RequestBody List requestAddBuy)

方式二：

发送数据

//发送表单ajax请求 $(':submit').on('click',function(){ $.ajax({ url:"buy", type:"POST", data:$('form').serializeArray(), contentType:"application/x-www-form-urlencoded", success:function(){ alert("成功"); } }); });

使用jQuery自带方法$.serializeArray()转换然后使用contentType:”application/x-www-form-urlencoded”格式

controller接收

@RequestMapping(value = "/buy") public void addBuy(BuyAdd buyAdd){ System.out.println(buyAdd); }

接收显示

BuyAdd{huohao='245', changjia='wef', yanse='', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='2345'}

这种方式可以直接接收对象，不如直接使用form自动提交省事(方式三)

方式三：

数据传输

controller接收

@RequestMapping(value = "/buy") public void addBuy(BuyAdd buyAdd){ System.out.println(buyAdd); }

接收显示

BuyAdd{huohao='245', changjia='wef', yanse='', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='2345'}

【本文地址】

form表单提交json格式数据

form表单提交json格式数据

今日新闻

推荐新闻