form表单提交json格式数据

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

个人实践整理。

方式一：

发送数据

<script type="application/javascript">    //发送表单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;    };</script>

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'}==============================

这种方式需要后台接收json字符串后自行转为对象

---

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

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<RequestAddBuy> 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'}]

---

方式二：

发送数据

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

使用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自动提交省事(方式三)

方式三：

数据传输

<form action="buy" method="post">

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'}