首页 > Web开发 > 详细

js中表单数据序列化方式--转

时间:2020-01-13 13:55:01      阅读:83      评论:0      收藏:0      [点我收藏+]

https://www.cnblogs.com/30go/p/9158167.html

一共有以下三种:

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

 

js中表单数据序列化方式--转

原文:https://www.cnblogs.com/ceci/p/12186789.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!