前端 传表格多条数据 给后台接收 (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
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());
(第二种方式):提交到后台处理
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