zoukankan      html  css  js  c++  java
  • HTML页面把表格中的多行数据用JSON封装后;异步提交到后台处理

    一:前台封装数据:

    1.js里面先创建对象:

         //封装数据的对象
         var PayObj =  
            {  
              O_NBR:"",    
              P_NBR:"",  
              O_AMOUNT:""  ,
              P_DT:"",
              P_HL_ZH:"",
              P_PAY_TYP:"",
              P_POS:"",
              P_U_ZH:"",
              P_U_HM:"",
              P_ATTR_IMGS:"",
              P_RECEIPT_NBR:""
            }

    2.遍历表格封装数据:(表格的每一行是一个JSON对象;多行就是一个JSON数组,JSON数组在弄成一个对象)

             var a = JSON.parse("{"title":"","data":[]}");

             //封装底部表格中的数据
              var rows = document.getElementById("playlistTable").rows.length; //获得行数(包括thead)
              var colums = document.getElementById("playlistTable").rows[0].cells.length; //获得列数
              if(rows > 1){//
                for (var i = 1; i < rows; i++) { //每行 从第二行开始因为第一行是表格的标题
                    var PayObj = new Object();//这里一定要new新的对象,要不然保存的都是一样的数据;都是最后一行的数据
                    PayObj.O_NBR = O_NBR;
                    var tdValue = document.getElementById("playlistTable").rows[i].cells[0].innerHTML;
                    if(tdValue == "POS录入"){
                       PayObj.P_PAY_TYP = "3";
                       PayObj.P_POS = document.getElementById("playlistTable").rows[i].cells[5].innerHTML;
                       PayObj.P_NBR = document.getElementById("playlistTable").rows[i].cells[4].innerHTML;
                       PayObj.P_HL_ZH = document.getElementById("playlistTable").rows[i].cells[7].innerHTML;
                    }
                    if(tdValue == "支票"){
                       PayObj.P_PAY_TYP = "4";
                       PayObj.P_NBR = document.getElementById("playlistTable").rows[i].cells[6].innerHTML;
                    }
                    if(tdValue == "银行转账"){
                     PayObj.P_PAY_TYP = "5";
                     PayObj.P_U_ZH = document.getElementById("playlistTable").rows[i].cells[8].innerHTML;
                     PayObj.P_U_HM = document.getElementById("playlistTable").rows[i].cells[9].innerHTML;
                     PayObj.P_HL_ZH = document.getElementById("playlistTable").rows[i].cells[7].innerHTML;
                    }
                    if(tdValue == "建行卡收款"){
                       PayObj.P_PAY_TYP = "6";
                    }
                    //公共数据
                    PayObj.O_AMOUNT = document.getElementById("playlistTable").rows[i].cells[1].innerHTML;
                    PayObj.P_DT = document.getElementById("playlistTable").rows[i].cells[2].innerHTML;
                    PayObj.P_RECEIPT_NBR = document.getElementById("playlistTable").rows[i].cells[3].innerHTML;
                    PayObj.P_ATTR_IMGS = $("#imgs").val();
               
                    a.data.add(PayObj);//向JSON数组添加JSON对象的方法;很关键
                  }

                  ///格式化数据
                 var obj=JSON.stringify(a);//这一行很关键

                 //异步提交数据

                  $.ajax({
                            url: "${applicationScope.rootpath}contract/savePayOffInforOfAll.action",
                            type: "post",
                            data: {'param':obj},//参数
                            datatype: "json",
                            success: function (data) {
                                var obj = eval("(" + data + ")");
                                if (obj.success) {
                                    mini.unmask();
                                    alert(obj.message);
                                    
                                    location.reload();
                                }
                                else {
                                    mini.unmask();
                                    alert(obj.message);
                                }
                            }
                        });

    二:后台解析数据

            String param = request.getParameter("param");
            JSONObject json=JSONObject.fromObject(param);
            @SuppressWarnings("unchecked")
            List<Map<String,String>> payList=json.getJSONArray("data");

          //这样就把数据变成list集合;以后怎么操作就方便了

    三:其他相关知识

      1.JSON数组的增删JSON对象

    <!DOCTYPE html>
     2 
     3 <html>
     4 <head>
     5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     6 <title>javascript里面的数组,json对象,动态添加,修改,删除示例</title>
     7 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
     8 <script type="text/javascript">
     9 var a = JSON.parse("{"title":"","data":[]}");
    10 var b = JSON.parse("{"id":"2"}");
    11 var c = JSON.parse("{"id":"3"}");
    12 var d = JSON.parse("{"id":"4"}");
    13 var e = JSON.parse("{"id":"5"}");
    14 var f = JSON.parse("{"id":"6"}");
    15 function myObjectPush() {
    16 debugger;
    17 /*
    18 javascript里面的数组,json对象,动态添加,修改,删除示例
    19 只要适合Javascript的方法都是可以用在JSON对象的数组中的!所以还有另外的方法splice( )进行crud操作!
    20 */
    21 
    22 //增加属性
    23 $(a).attr("id", "1");
    24 //增加子对象
    25 a.data.push(b); //数组最后加一条记录
    26 a.data.push(c);
    27 a.data.push(d);
    28 a.data.unshift(d);//数组最前面加一条记录
    29 
    30 //修改子对象及属性
    31 a.title = "这是json名字";
    32 
    33 //删除子对象
    34 //json的删除有很多种,直接用过 delete json对象方式:
    35 delete a.data[1];
    36 
    37 a.data.pop(); //删除最后一项
    38 a.data.shift(); //删除第一项
    39 a.data.splice(0, 1); //删除指定子对象,参数:开始位置,删除个数
    40 
    41 //替换不删除
    42 a.data.splice(1, 0, e, f);//开始位置,删除个数,插入对象
    43 //替换并删除
    44 a.data.splice(0, 1, e, f);//开始位置,删除个数,插入对象
    45 }
    46 </script>
    47 </head>
    48 <body onload="myObjectPush()">
    49 </body>
    50 </html>


    2. js处理json数组 
    JSON(JavaScript Object Notation )是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,JSON是JavaScript原生数据格式。

        在JSON中,有两种数据结构:对象和数组。

        1.一个对象以“{”开始,“}”结束。每个“名称”后跟一个“:”,“名称/值”对之间运用“,”分隔,名称用引号括起来,如果是字符串则必须用括号,数值类型则不需要。

    例:var obj={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};

        2.数组是值的有序集合,一个数组以“[”开始,以“]”结束,值之间用“,”分隔。

    例:var  jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];

        为了方便处理JSON数据,JSON提供了json.js包,下载地址:http://www.json.org/json.js

        在数据传输流程中,json是文本,即以字符串形式传递,而JS操作的是json对象,所以,JSON对象和JSON字符串之间可以相互转换。

        JSON字符串:

        var str1 = '{ "name": "cxh", "sex": "man" }';

        JSON对象:

        var str1 = { "name": "cxh", "sex": "man" };

        3.JSON字符串转换为JSON对象:

        //JSON字符串转换JSON对象

        var Obj = eval('('+ str +')');

        var Obj = JSON.parse(str);

        var Obj = str.parseJSON();

        使用的时候直接,alert(Obj.name)。

        *注:如果Obj本身就是一个JSON对象,用eval()函数处理后,结果还是JSON对象,但用parseJSON()处理会抛出语法异常。

        4.JSON对象转化为JSON字符串。

        var str1 = Obj.toJSONString();

        var str2 = JSON.stringgify(obj);

    3.js对象转化成json数据格式

    var UserObj =  
            {  
              userId:"",    
              userName:"",  
              roleId:""  ,
              roleName:""
            }  

    function submitData() {
        var tb = document.getElementById(IDArray[0]);
        if (tb)
         {
        var rows = tb.rows;
        var ohjInfo;
        for (var i = 1; i < rows.length; i++) {
            var id = rows[i].cells[1].innerText;
            var name = rows[i].cells[2].innerHTML;
            var oDropDownList = rows[i].cells[3].childNodes[0];
            var oText = oDropDownList.options[oDropDownList.selectedIndex].text;
            var oValue = oDropDownList.options[oDropDownList.selectedIndex].value;
            UserObj.userId = id;
            UserObj.userName = name;
            UserObj.roleId = oValue;
            UserObj.roleName = oText;
            var objStr = Serialize(UserObj);  // js对象转化成json数据格式
            ohjInfo += objStr;
        }
        return ohjInfo;
        }
    }

    function Serialize(obj){      
         switch(obj.constructor){      
             case Object:      
                 var str = "{";      
                 for(var o in obj){      
                     str += o + ":" + Serialize(obj[o]) +",";      
                 }      
                 if(str.substr(str.length-1) == ",")      
                    str = str.substr(0,str.length -1);      
                  return str + "}";      
                  break;      
              case Array:                  
                  var str = "[";      
                  for(var o in obj){      
                      str += Serialize(obj[o]) +",";      
                  }      
                  if(str.substr(str.length-1) == ",")      
                      str = str.substr(0,str.length -1);      
                  return str + "]";      
                  break;      
              case Boolean:      
                  return """ + obj.toString() + """;      
                  break;      
              case Date:      
                  return """ + obj.toString() + """;      
                  break;      
              case Function:      
                  break;      
             case Number:      
                  return """ + obj.toString() + """;      
                  break;       
              case String:      

                 return """ + obj.toString() + """;      
                  break;          
          }      
      } 

     
  • 相关阅读:
    linux 文件记录锁详解
    Linux fcntl函数详解
    大数相加
    信雅达面试题atoi函数实现
    linux getopt函数详解
    strcpy和memcpy的区别
    手把手写数据结构之栈操作
    手把手写数据结构之队列操作
    手把手写数据结构之双向链表操作
    ORACLE查询内存溢出
  • 原文地址:https://www.cnblogs.com/wushuishui/p/4311633.html
Copyright © 2011-2022 走看看