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

编程入门 行业动态 更新时间:2024-10-28 08:20:27

前端 传表格<a href=https://www.elefans.com/category/jswz/34/1769946.html style=多条数据 给后台接收 (HTML前端表格多条数据JSON封装后;异步提交到后台处理)"/>

前端 传表格多条数据 给后台接收 (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<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数据格式

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

更多推荐

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

本文发布于:2023-06-27 19:31:48,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/915958.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:多条   表格   后台   数据   JSON

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!