js中表單數據序列化方式

一共有以下三種：

var obj1 = $('#queryForm').serialize();
var obj2 = $('#queryForm').serializeArray();
var obj3 = $('#queryForm').serializeObject();
var obj4 = JSON.stringify(obj3);   //通過3轉化為json字符串

分別對應的是：

obj1: 字符串拼接

obj2: 對象數組,都是name，vlaue

obj3: 對象

obj4: json字符串

 

 

 

 

應用場景：

1. 使用easyui中的datagrid表格控件展示數據的時候，在查詢的頁面中使用如下：

//toolbar按鈕
function searchData(){
    var obj = $('#queryForm').serializeObject();
    $('#dg_sub').datagrid("reload",obj);
}

 

2. ajax向后台提交數據時：

如果一個表單的提交，可以直接使用第3種形式，即向后台提交一個object對象。例子如下：

$.ajax({
    type: 'POST',
    url: ctx + "/buyOrderDetail/buyOrderDetailSave", 
    async: false,
    data: $('#buyOrderForm').serializeObject(),
    success: function(data){
    },
    error:function(data){
    }
});

 如果有多個表單需要同時向后台提交，這樣使用第3種就不行了，ajax就需要做以下調整更新：

var buyOrderStr = JSON.stringify($('#buyOrderForm').serializeObject());
$.ajax({
    type: 'POST',
    url: ctx + "/buyOrderDetail/buyOrderDetailSave", 
    async: false,
    data: {buyOrderStr: buyOrderStr, entities: entities},
    success: function(data){
    },
    error:function(data){
    }
});

這時候就變成了json字符串，在java后台直接接收字符串形式，然后使用json轉對象即可。

    //保存采購單明細信息
    @RequestMapping("/buyOrderDetailSave")
    @ResponseBody
    public String  buyOrderDetailSave(Model model,String buyOrderStr, String entities) throws Exception {

        BuyOrder buyOrder = JSON.parseObject(buyOrderStr, BuyOrder.class);
        
        entities = entities.substring(2);
        entities =" [" + entities + "]";
        //前端提交的LIST
        List<BuyOrderDetail> listDetail = JSON.parseArray(entities, BuyOrderDetail.class); 
}