一个页面上多个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方法}

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

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

.form文件_含文件上传的form表单AJAX提交小结
最近在学习PHP时,遇到不知道如何含文件上传的form表单AJAX提交,现在把这些记录下来以备自己后续复习时用: HTML代码 *姓名: *性别: {eq name='list.sex' value= ...
form表单按enter键自动提交的问题
废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 1 <!doctype html> 2 <html lang="en"> 3 < ...
ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ]
一.截图和示例共用Ext.FormPanel 1.1 截图由于本文主要关注的是表单提交的几种方式,所以仅用了一个表单项以便于测试和减少示例代码. 1.2 示例共用Ext.FormPanel ...
Vue form表单input框手动赋值提交时表单input值没有生效验证仍然是空
一.问题 1.input 赋值后表单提交却为空在调用接口将返回的值赋在表单的 input 上或者子页面传递数值给父页面form表单model元素后,提交表单,明明值已经赋上去了,结果提交后显示的该值 ...
form表单序列化转换为json对象
form表单序列化转换为json对象 //form表单序列化转换为json对象 (function($){$.fn.serializeJson=function(){var serializeObj= ...
form表单input使用disabled后提交不能获取表单值的解决方法
今天遇到一个问题:在form表单中的input上使用disabled禁用标致,会导致表单提交时获取不到值.经过调试,以及参考相关博文,最终得以解决,下面记录解决方法. form表单输入框input设置 ...
ajax提交form表单到php,ajax如何提交form表单数据？ajax提交form表单数据的方法介绍...
对于form表单数据的提交,我们一般都会想到使用ajax提交,那么,ajax如何来提交form表单数据呢?接下来的这篇文章就来给大家来介绍关于ajax提交form表单数据方法,有需要的伙伴可以参考一下 ...
form表单，submit，ajax提交
尼玛... 一个简单的表单提交,竟然给我整的直郁闷. 本来就是个保存功能,几个前人都用的ajax提交,我也就没改成submit.然后坑爹的就来了. 我在表单里写了个<form></f ...
js使用工具将表单封装成json字符串传到后台，js截取字符串(学生笔记)
<script src="js/jquery.min.js"></script> <script src="https://cdn.boot ...

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

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

最新文章

热门文章