一个页面上多个form表单的用json数据格式提交到后台

在项目开发中遇到多个表单需要提交到后台,而且其中包含一些table数据,所以最后经过查询资料总结出以下方法:(我用的前端框架是layui其他的思想应该是一样的)

在看代码之前先说一下我的思路,因为代码写的也不是很详细,
首先我们可以通过$("#countForm").serializeArray()得到序列化的form表单上的数据,但是这个数据不是标准后台可以接收的数据,所以需要通过我下面的那种手段给转换成标椎格式,就这样将页面上的每一个表单都转换成标准格式,然后将这些标准格式合并组合成为一个大的标准的json串,然后后台声明一个结构和这个json串一样的对象来接受这个json串,最后就实现了多个表单使用json数据格式传送数据,实际如果没有那些特殊的数据(table表数据、复选框数据等)直接用

$("#countForm").serialize()...."
var PolicyMainString=countFormData+'&'+numberFormData+'&'+writeFormData+'&'+sureFormData;"

这种方式就可以拼接成字符串传输到后台,但是没办法,需求就是这样的,为了实现功能只能麻烦一点,但是这种方式真的很实用,也通过这个项目学习到了更多解决问题的方法
以下是js代码

 		var countFormData = $("#countForm").serializeArray();
 		var numberFormData = $("#numberForm").serializeArray();
		var writeFormData = $("#writeForm").serializeArray();
		var sureFormData = $("#sureForm").serializeArray();
		//获取table数据
		var tr = $("#tableTest tr"); // 获取table中每一行内容
		var result = []; // 数组
		for (var i = 0; i < tr.length; i++) {// 遍历表格中每一行的内容
			var tds = $(tr[i]).find("td");
			if (tds.length > 0) {
				result.push({
					"affiliatedcompanyname" : $(tds[0]).find("input").val(),
					"companyaddress" : $(tds[1]).find("input").val(),
					"contact" : $(tds[2]).find("input").val(),
					"phone" : $(tds[3]).find("input").val()
				})	
			}
		}
		//************************以下的代码主要是讲序列化的json数据转换为标准格式的json数据串**********************************
		//获取countFormData表单数据
		var countObj={};//给obj分配内存
		for(var i =0;i<countFormData .length;i++){
			countObj[countFormData [i].name]=countFormData [i]['value'];
		}
		//获取countFormData表单中的附加险种
		var coveragecodeObj={};
       	var coveragecodelist = $("[name='coveragecode']:checked"),
       	coveragecode = '';
      	$.each(coveragecodelist,function (i,v){
      		coveragecode += i > 0 ? ","+v.value : v.value;
      		coveragecodeObj={coveragecode};
      	});
		//获取numberFormData表单数据
		var numberObj={};//给obj分配内存
		for(var i =0;i<numberFormData .length;i++){
			numberObj[numberFormData [i].name]=numberFormData [i]['value'];
		}
		//获取writeFormData表单数据
		var writeObj={};//给obj分配内存
		for(var i =0;i<writeFormData .length;i++){
			writeObj[writeFormData [i].name]=writeFormData [i]['value'];
		}
		//获取sureFormData表单数据
		var sureObj={};//给obj分配内存
		for(var i =0;i<sureFormData .length;i++){
			sureObj[sureFormData [i].name]=sureFormData [i]['value'];
		}
		//*******************************************************************************************************************
		var jsonData = { // json数据
				"businessList" : result,
				"countFormData": countObj,
				"numberFormData":numberObj,
				"writeFormData":writeObj,
				"sureFormData":sureObj,
				"coveragecodelist":coveragecodeObj
			}
       $.ajax({
			   type:"post",
			   url:contextPath+'policy/InsertPolicyMain',
			   contentType : "application/json;charset=UTF-8",
			   data:JSON.stringify(jsonData),
			   dataType:'JSON',
			   success:function(data){
				  if(true == data.status){
				        parent.layer.alert(data.promptMsg);
				  }
			}
		});

后台需要使用一个大的对象来接收这各json数据串(需要注意的是各个对象的名字需要和json串中的一样(小写的那个),不然接收不到)

import java.io.Serializable;
import java.util.List;

public class JsonData implements Serializable{
	private CoverageCodeList coveragecodelist;
	private CountFormData countFormData;
	private NumberFormData numberFormData;
	private WriteFormData writeFormData;
	private SureFormData sureFormData;
	private List<Business> businessList;
	//实现get和set方法
	//实现toString方法
	}

由于代码真的篇幅太大了,所以没有全部粘贴,只列出了一个大概,所以有问题的兄弟们多留言,看到一定第一时间回复,

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值