热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

前端传表格多条数据给后台接收(HTML前端表格多条数据JSON封装后;异步提交到后台处理)1.多条数据采用checkBox携带封装数据的对象varPa

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

String param = request.getParameter("param");
        JSONObject json=JSONObject.fromObject(param);
        List> payList=json.getJSONArray("data");
6.经过测试直接转为 List是可以的
List payListNew = json.getJSONArray("data");


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

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


推荐阅读
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 本文讨论了如何在codeigniter中识别来自angularjs的请求,并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax(),但都没有成功。最后,作者展示了一个ajax请求的示例代码。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • Postgresql备份和恢复的方法及命令行操作步骤
    本文介绍了使用Postgresql进行备份和恢复的方法及命令行操作步骤。通过使用pg_dump命令进行备份,pg_restore命令进行恢复,并设置-h localhost选项,可以完成数据的备份和恢复操作。此外,本文还提供了参考链接以获取更多详细信息。 ... [详细]
  • vue使用
    关键词: ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • 不同优化算法的比较分析及实验验证
    本文介绍了神经网络优化中常用的优化方法,包括学习率调整和梯度估计修正,并通过实验验证了不同优化算法的效果。实验结果表明,Adam算法在综合考虑学习率调整和梯度估计修正方面表现较好。该研究对于优化神经网络的训练过程具有指导意义。 ... [详细]
  • 个人学习使用:谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
  • Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中,如Kubernetes、Hugo和Github CLI等。通过使用Cobra,我们可以快速创建命令行工具,适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
  • 本文讨论了编写可保护的代码的重要性,包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法,如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道,如不规范的命名、重复代码、过长的函数和参数列表等。最后,介绍了如何处理数据泥团和进行函数重构,以提高代码质量和可维护性。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
author-avatar
猛儿187888
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有