1. 程式人生 > >form表單提交json格式資料

form表單提交json格式資料

個人實踐整理。

方式一:

傳送資料

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

宣告:這裡我用的是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<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'}]

宣告:這裡同樣是存在FastJson的問題,如果用Jackson則可以把controller改為addBuy(@RequestBody List<RequestAddBuy> requestAddBuy)

方式二:

傳送資料

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