分享

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

 yan的图书41 2017-06-14

一:前台封装数据:

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./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.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;          

}      

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多