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

     
  • 相关阅读:
    uva 11294 Wedding
    uvalive 4452 The Ministers’ Major Mess
    uvalive 3211 Now Or Later
    uvalive 3713 Astronauts
    uvalive 4288 Cat Vs. Dog
    uvalive 3276 The Great Wall Game
    uva 1411 Ants
    uva 11383 Golden Tiger Claw
    uva 11419 SAM I AM
    uvalive 3415 Guardian Of Decency
  • 原文地址:https://www.cnblogs.com/wushuishui/p/4311633.html
Copyright © 2020-2023  润新知