前端 传表格多条数据 给后台接收 (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封装后;异步提交到后台处理)相关推荐
- Eclipse项目上传码云、从码云上检出项目、修改检出项目后在提交到码云、看此篇即可
Eclipse中项目上传到码云平台 文章的目的是自己记录学习使用,只记录使用eclipse相应的上次下载修改方法,具体细节没做很大把控.希望对自己学习有所帮助,同时也希望能帮助到没有接触到这块的人一起 ...
- 前端传图片file给后端,后端接收为空,0kb
@TOC需求场景:前端canvas生成海报以file格式传给后端存储,大部分机型是正常的 到了iphone7P上传给后端 后端接收到为空 0Kb 一开始我是这样做的 这样在大部分机子上是可以的 但在低 ...
- 通过jquery的serializearray处理表单数据成json格式,并提交到后台处理
var params = $("#myform").serializeArray(); var values = {}; for (var item in params) {val ...
- 加密前端传参和后端结果返回加密
好的,我分别给出一个简单的前端代码样例和后端 Node.js 代码样例,示范如何加密前端传参和后端结果返回的加密. 前端代码示例: import CryptoJS from 'crypto-js';c ...
- Android头像上传--图片转base64,后台接收到的总是null问题
图片转base64,后台接到为null问题 项目中,在使用头像上传的时候,将图片转为base64,后台总是收到的base64字符串是null.原以为是图片未压缩,导致图片过大,超过了Tomcat配置的 ...
- html5表单提交json数据库,使用html5的FormData对象,通过 Ajax表单异步提交文件数据...
每次在向服务器提交文件对象数据是,总是需要借助各种三方插件来实现表单异步提交功能,还要为不同的界面去定制不同的插件css,相当繁琐.XMLHttpRequest Level 2 添加了一个新的接口-- ...
- 表单序列化serialize()和serializeArray()的区别以及后台接收
表单序列化serialize()和serializeArray()的区别以及后台接收 function add() {var data = $("#systemForm").ser ...
- html上传文件与后台处理,关于前端html图片和文件上传和后台接收方法
前些时间项目和h5交互时涉及到了文件上传的一个功能,但是h5在写上传的时候总是上传不上,所以花时间专门看了下web端的文件上传记录下. 第一种是前端写的,拿来修改了下,这种方法在上传的时候需要用到jq ...
- 后台接收datetime_input上传date日期时间数据到后台报400怎么办?
前端上传日期时间数据到后台时,上传失败 我这里是用里存放时间,上传到后台的controller方法时,参数类型是java.util.Date,发现没有到controller方法里面.报错:不能将Str ...
最新文章
- keras Regressor 回归
- notepad++ 设置常用快捷键
- Python 列表和元组
- 解决PowerDesigner 16 Generate Datebase For Sql2005/2008 对象名sysproperties无效的问题
- java学习(15):巩固练习
- python写传奇脚本,Python趣味打怪:60秒学会一个例子,147段简单代码助你从入门到大师 | 中文资源...
- Head First设计模式读书笔记十 第十一章 代理模式
- 微信小程序UI------实现携程首页顶部的界面(弹性布局)
- php构造方法什么时候使用,php:构造方法的说明详解
- linux 提取有效源码,MPSOC之4——petalinux提取源码
- Selenium WebDriver 与 iOS 自动化测试 (做了一些初步的工具对比)
- ERP常用词汇中英文对照
- 投屏软件_duet for Mac(Mac投屏软件)
- 计算机网络技术组装与维护,计算机组装与维护计算机网络技术2010(组网)课程标准.doc...
- DTAS尺寸公差分析软件-三维尺寸公差分析软件尺寸链计算软件
- pc安装openwrt
- 实现顺序串各种基本运算的算法
- Automatic generation of PO (ME56 ME59N)
- 计算机专业大学课程学习路线图
- 八拜之交是指哪八拜?
热门文章
- 苹果操作系统 leopard 10.5 (PC破解完全中文安装版,IBM X40安装成功)
- 【自存代码】划分数据集为训练集和测试集
- 直击微软第九频道著名主持Robert Green 对话一站式示例代码库大老板梁梅女士
- 【设计模式】-常见面试题汇总
- PAKDD 2019 中国企业深兰科技夺冠:AutoML 如何推动 AI 应用落地?
- 现代的linux和windows7,Windows 7 Vs. Linux谁更强
- 读书笔记1|深度学习入门:Machine Learning Yearning
- ubuntu18.10安装网易云音乐,并解决网易云音乐图标无法启动的问题
- 国开教育学形考任务2试题1试题及答案
- Idea Eclips快捷键