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

前端 传表格多条数据 给后台接收 (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> payList=json.getJSONArray("data");

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

List 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 shareholdersBeneficiaryCurForm =
                    JSONArray.toList(shareholdersBeneficiaryJSONArray,new MerchantShareholdersBeneficiary(),new JsonConfig());

 

 

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

js对象转化成json数据格式

1.前端页面

var PayObj =
	{
		requestTransNo :"",
		cardNo :"",
		cardUser :""  ,
		dealDate :"",
		orderId :"",
		tranNo :"",
		refundAmt :"",
		refundReason :""
	}
	var ohjInfo = "";
	var ohjInfoEnd = "";
	
	function getChecked() {
		roleids = "";
		$('input[name="check[]"]:checked').each(function() {
			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');
			var objStr = Serialize(PayObj);  // js对象转化成json数据格式
			ohjInfo += objStr + ",";
		});
		ohjInfoEnd = "[" + ohjInfo.substring(0, ohjInfo.length - 1) + "]";
	}
	
	$.ajax({
		type: "post",
		url : "${ctx}/refund/transferPaymentReback/ajaxRefundTransferPaymentReback.do",
		dataType: "json",
		cache: true,
		data:{'param':ohjInfoEnd},
		success: function (data) {
			showAlertMsg(data.flag.errorMsg, {
				closeFunction: function () {
					if (data.flag.success == true) {
						window.location.href="${ctx}/member/relation/bankOfHuaXiaManager.do"
					}
				}
			});
		},
		error: function () {
			alertMsg(null, false, null, null, "调用接口失败,请稍后重试!");
		}
		});
		
		
		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;
		}

	}

2.后台接受转换参数

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

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

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

List  transferPaymentReqDTOs

你可能感兴趣的:(JAVA,WEB)