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

 
时间: 2024-10-10 20:58:10

HTML页面把表格中的多行数据用JSON封装后;异步提交到后台处理的相关文章

mysql5.7基础 更新表格中某列为指定数据的 一行

镇场文:       学儒家经世致用,行佛家普度众生,修道家全生保真,悟易理象数通变.以科技光耀善法,成就一良心博客.______________________________________________________________________________________________________ Operating System:UbuntuKylin 16.04 LTS 64bitmysql: Ver 14.14 Distrib 5.7.17, for Linux (

SQL中将某个表中的多行数据在一个字段显示

项目需求:将某个表中的多行数据在一个字段显示,如下: 比如表A中有字段 ID,NAME, 表B中有字段ID,PID,DES, 表A,表B中的数据分别如下: ID NAME1 张三2 李四 ID PID DES1 1 语文2 1 数学3 1 外语4 2 历史5 2 地理 最终我想显示的效果为: ID NAME KC1 张三 语文,数学,外语2 李四 历史,地理 方法:使用sql中的STUFF函数与for xml path 1.for xml path是将将查询结果集以XML形式展现 比如对于表B,

C# 在Word表格中插入新行(表格含合并行)

public string CreateWordFile(string CheckedInfo)         {             string message = "";             try             {                 Object Nothing = System.Reflection.Missing.Value;                 Directory.CreateDirectory("C:/CNSI&q

如何用perl将表格中不同列的数据进行拼凑,然后将拼凑后的数据用“|”连接在一起

最近写了一个perl脚本,实现的功能是将表格中其中两列的数据进行拼凑,然后将拼凑后的数据用“|”连接在一起. 表格内容如下: 员工号码 员工姓名 职位 入职日期 1001 张三 销售 1980/12/17 0:00:00 1002 李四 财务 1981/02/20 0:00:00 1003 王五 经理 1981/02/22 0:00:00 1004 陈二 会计 1981/04/02 0:00:00 要求如下: 将员工姓名和入职日期用键值对的形式拼凑在一起,然后将拼凑后的数据用“|”连接在一起.

Excel表格中带有单位的数据怎样求和?推荐三种求和技巧!

在表格中求和的方法想必大家已经学会了很多种了,可是在带有单位的数据中,那些求和方法就不能使用了.不用担心,今天小编为大家分享几种带有单位数据的求和方法.No.1公式求和法当我们表格中的数据带有单位的时候,一般的求和公式「=SUM(B2:B9)」是不可以用的.其实我们可以使用求和公式「=SUMPRODUCT(1*SUBSTITUTE(B2:B9,"元",""))&"元"」就可以求出数据之和了.No.2替换查找去点单位求和法我们先选中B列中的

js获取表格中的数据 以及 表格中checkbox选中一行数据

前言 不知道是不是大家也遇到过类似的表单,但我绝对是第一次见,如下图所示,表单中包含了表格. 上图中的表格数据是根据数据库中学生表而变化的,这增加了获取表中数据的复杂程度,这里仅仅是记录js如何获取数据传值到后端的办法,所以,仅以表格中张三.李四为例. 示例代码 html <div class="modal-body"> <form id="exam-score-add-form" class="smart-form">

查询数据库中第n行数据

一般情况下分页的时候是需要的关键字.MySQL中是limit关键字,MSSQL中是top关键字,Oracle中则是rownum. 伪列是指那些可以像表中的列一样用在SELECT中但不作为用户数据在表中存储的特殊标识, 它们可以被选择(使用SELECT),但不能被删除(DELETE)和更新(UPDATE).ROWNUM的本质是一个伪列,它的作用是对结果集加的一个伪列(即先查到结果集之后再加上去的一个列)简单的说rownum是对符合条件结果集添加的序列号.它总是从1开始排起的,所以选出的结果中不可能

excel vba编程,是在一段表格中插入几行后,插入行后的行整体下移,不破坏原有数据内容,

Range(Rows(3), Rows(5)).Insert shift:=xlDown 1)在当前单元格处插入一行 : 可以增加循环语句来实现插入多行Range("A10").SelectSelection.EntireRow.Insert , CopyOrigin:=xlFormatFromLeftOrAbove 2)在当前选择行处插入与选择行数相同的行数: 可更改行号来实现不同地方的插入. Rows("10:11").Select Selection.Inse

遍历表格中的数据,将表格中的某行的某个字段存到数组中,且该数组中不能有相同字段值

var ishas = false; var pid_arr= []; onLoadSuccess: function (data) {                    if (data.length > 0) {                for (var i = 0; i < data.length; i++) {                    if (pid_arr.length == 0) {                        pid_arr.push(d