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