zoukankan      html  css  js  c++  java
  • 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); 
    }
  • 相关阅读:
    笨方法学python中执行argv提示ValueError: not enough values to unpack (expected 4, got 1)
    VMware workstation安装
    Redis bigkey分析
    MySQL drop table 影响及过程
    MySQL 大表硬连接删除
    ES elasticsearch 各种查询
    ES elasticsearch 各种聚合
    ES elasticsearch 聚合统计
    ES elasticsearch 实现 count单字段,分组取前多少位,以地理位置中心进行统计
    MySQL行溢出、varchar最多能存多少字符
  • 原文地址:https://www.cnblogs.com/30go/p/9158167.html
Copyright © 2011-2022 走看看