JSON提交利器——serializeJSON

复杂表单JSON方式提交

1. 为什么用JSON方式提交？

JSON方式数据的层次、结构清除，可以方便Springmvc的解析。如下的复杂对象

ContractManageVO是最外层的对象，包含了一个ContractTraderVO对象数组

 ContractTraderVO也是一个复杂的嵌套对象，包含了CustermerInformationDO

CustermerInfotmationDO是最内层

1. 以上的三层数据，实际上对应了前台复杂的表单的三层关系

如图，

1：是最基本的信息，对应最外层的ContractManageVO中的简单变量

2：和1是多对一的关系，一个ContractManage可能会有多个供应商或需求商，体现在ContractManageVO中的List

3：然而，最复杂的是，每个供应商或需求商的收货地址或者联系人并不是直接从供应商资料或客户资料中拿到的，而是要用户输入进行指定，这些字段在供应商资料的表中是不存在的！（表中存在的联系人字段是主要联系人，而用户的需要可能是指定其他联系人，因此这个被指定的联系人字段实际上也不存在于表中）

（ContractTraderVO.java）

（ContractTraderDO.java）

如上图，VO继承了DO,并且对应了另一张关系表，这样就有给联系人和发货地址存值的能力。

同样的，由于ContractTraderVO对应的是合同中的需求商信息，所以CustermerInformationDO(客户资料)也是要有的，这个是从客户资料表拿的数据。

拼接JSON

传统的拼接方法是在表单提交时用字符串拼接JQuery或dom选择器的语法获取的表单中的input的值，但是这种方法比较麻烦，而且没有复用性，每个页面的拼接都不一样，尤其是面对复杂数据时，工作量加大，错误概率提升，调试起来非常麻烦。

1. JSON提交的利器——serializeJSON

serializeJSON是Github上的前端开源项目，功能是直接把表单中的数据通过name属性进行解析，转换成JSON格式，支持数组类型、复杂对象。

Github地址：https://github.com/marioizquierdo/jquery.serializeJSON

 

 

serializeJSON语法

对于最外层的数据，name和原来一样，无需改变

数组

（一般是指数组项是简单类型的数组，String/Integer/Date等）

数组名+[]的方式，可以传递数组，表单中所有的数组项可以用相同的name，serializeJSON会识别他们并放到一个数组里

对象数组

（对应数组项的是JavaBean里自定义的对象）

serializeJSON会识别到suppliers这个对象数组，并且把contactPersonId作为对象数组项的变量名放到对象数组中

复杂的对象数组

（数组项是多层的嵌套对象）

每个suppliers数组项有一个trader，每一个trader有一个custermerName

已知Bug

图中框选的两个input调换位置时，custermerId(层次多的input)可能会拿不到值

避免办法：隐藏域放到前面，隐藏域中嵌套层次多的input最好放在后面

提交方法

调试

若使用serializeJSON工具，最好在传递数据的时候进行前后台的调试或打印，确保复杂数据的所有值都被传递，如果出现数据丢失，尝试调换input的位置(调换方法，丢失数据的input和调试时位置异常的input调换)

*位置异常是指出现在调试窗口的数据位置和html中input定义的顺序不一样

 

Springmvc接收

一个RequestBody即可

为了Springmvc的识别，前端出现的所有input的name中变量名要保证和后台DO或VO中的变量名一致！