前端传表格多条数据给后台接收（HTML前端表格多条数据JSON封装后；异步提交到后台处理)

左手的ㄟ右手 2022-05-26 05:47 154阅读 0赞

**前端 传表格多条数据 给后台接收 （HTML前端表格多条数据JSON封装后；异步提交到后台处理)**

**1.多条数据采用checkBox 携带**

//封装数据的对象
         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:""
            }

// JSON字符串转换JSON对象

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

（1）JSON字符串转换JSON对象的方法有：

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

var Obj = JSON.parse(str);

var Obj = str.parseJSON();

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

\*注：如果Obj本身就是一个JSON对象，用eval（）函数处理后，结果还是JSON对象，但用parseJSON（）处理会抛出语法异常。

（2）JSON对象转化为JSON字符串。

var str1 = Obj.toJSONString（）；

var str2 = JSON.stringgify（obj）；

2.遍历表格封装数据：（表格的每一行是一个JSON对象；多行就是一个JSON数组，JSON数组在弄成一个对象）

function getChecked() {
    		$('input[name="check[]"]:checked').each(function() {
    			var PayObj = new Object();
    			roleids += $(this).val() + ",";
    			requestTransNo += $(this).val()  + ",";
    			cardNo += $(this).attr('cardNo') + ",";
    			cardUser += $(this).attr('cardUser') + ",";
    			refundAmt += $(this).attr('refundAmt') + ",";
    			tranNo += $(this).attr('tranNo') + ",";
    			dealDate += $(this).attr('dealDate') + ",";
    			orderId += $(this).val()  + ",";
    
    			PayObj.requestTransNo = $(this).val();
    			PayObj.cardNo = $(this).attr('cardNo');
    			PayObj.cardUser =  $(this).attr('cardUser');
    			PayObj.dealDate = $(this).attr('dealDate');
    			PayObj.orderId = $(this).val();
    			PayObj.tranNo = $(this).attr('tranNo');
    			PayObj.refundAmt = $(this).attr('refundAmt');
    			PayObj.refundReason = document.getElementById('refundReason').value;
    			alert(document.getElementById('refundReason').value);
    			a.data.push(PayObj);//向JSON数组添加JSON对象的方法；很关键
    		});
    }

3.///格式化数据

var obj=JSON.stringify(a);//这一行很关键

4.异步提交数据

$.ajax({
    		type: "post",
    		url : "${ctx}/refund/transferPaymentReback/ajaxRefundTransferPaymentReback.do",
    		dataType: "json",
    		cache: true,
    		data:{'param':obj},
    		success: function (data) {
    			$("#doSave").attr("disabled",false);
    			showAlertMsg(data.flag.errorMsg, {
    				closeFunction: function () {
    					if (data.flag.success == true) {
    						window.location.href="${ctx}/member/relation/bankOfHuaXiaManager.do"
    					}
    				}
    			});
    		},
    		error: function () {
    			$("#doSave").attr("disabled",false);
    			alertMsg(null, false, null, null, "调用接口失败，请稍后重试!");
    		}
    	});

5.后台解析接收数据

这里的JSONObject包是 net.sf.json.JSONObject

import net.sf.json.JSONObject;
    
    String param = request.getParameter("param");
            JSONObject json=JSONObject.fromObject(param);
            List<Map<String,String>> payList=json.getJSONArray("data");

6.经过测试直接转为 List<Object>是可以的

List<TransferPaymentReqDTO> payListNew = json.getJSONArray("data");

如若发现转换不成对应实体类对应的list，发现list的每一个对象是JSONObject

解决方案： **采用JSONArray转换成List**

String param = request.getParameter("param");
                net.sf.json.JSONObject json=net.sf.json.JSONObject.fromObject(param);
                JSONArray shareholdersBeneficiaryJSONArray= json.getJSONArray("data");
                List<MerchantShareholdersBeneficiary> shareholdersBeneficiaryCurForm =
                        JSONArray.toList(shareholdersBeneficiaryJSONArray,new MerchantShareholdersBeneficiary(),new JsonConfig());

(第二种方式)：**提交到后台处理**

# **[js对象转化成json数据格式][js_json]** #

**1.前端页面**

2.后台接受转换参数

import com.alibaba.fastjson.JSONObject;
    	
    	String param = request.getParameter("param");
    	
    	List<App>  collection = JSONObject.parseArray(abc1, App.class);
    	List<TransferPaymentReqDTO>  transferPaymentReqDTOs = new ArrayList<TransferPaymentReqDTO>();
    	for(App resultOne : collection){
    		TransferPaymentReqDTO new1 = new TransferPaymentReqDTO();
    		new1.setRequestTransNo(resultOne.getRequestTransNo());
    		transferPaymentReqDTOs.add(new1);
    	}

注：App 是 和TransferPaymentReqDto 有着相同参数的实体类，但是参数格式为String类型，否则转换出错

后台接受传入接口的参数 可以是：

List<TransferPaymentReqDTO>  transferPaymentReqDTOs

[js_json]: http://blog.csdn.net/zouyujie1127/article/details/7026258