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); 
}