1. 简单属性的表单域，序列化后只有一层JSON对象
/*** 功能：序列化form表单数据成Json对象* 1.name均是简单的一级对象* 2.同名的name属性，值会被序列化为数组，例如checkbox等控件*/$.fn.serializeObject = function() {var json = {};var arrObj = this.serializeArray();$.each(arrObj, function() {if (json[this.name]) {if (!json[this.name].push) {json[this.name] = [ json[this.name] ];}json[this.name].push(this.value || '');} else {json[this.name] = this.value || '';}});return json;};
2. 有嵌套属性的表单域，序列化成有嵌套结构的JSON对象
/** * 功能：序列化form表单元素* 1.同名的name属性，值会被序列化为数组，例如checkbox等控件* 2.可以嵌套对象，name和value会被序列化为嵌套的json对象格式* 3.可以嵌套对象列表，name和value会被序列化成嵌套的json数组对象*/$.fn.serializeNestedObject = function() {var json = {}; var arrObj = this.serializeArray();//alert(JSON.stringify(arrObj));$.each(arrObj, function() {// 对重复的name属性，会将对应的众多值存储成json数组if (json[this.name]) { if (!json[this.name].push) {json[this.name] = [ json[this.name] ];}json[this.name].push(this.value || '');} else {// 有嵌套的属性，用'.'分隔的if (this.name.indexOf('.') > -1) {var pos = this.name.indexOf('.');var key = this.name.substring(0, pos);// 判断此key是否已存在json数据中，不存在则新建一个对象出来if(!existKeyInJSON(key, json)){json[key] = {};}var subKey = this.name.substring(pos + 1);json[key][subKey] = this.value || '';}// 普通属性else{json[this.name] = this.value || '';}}});// 处理那些值应该属于数组的元素，即带'[number]'的key-value对var resultJson = {};for(var key in json){// 数组元素if(key.indexOf('[') > -1){var pos = key.indexOf('[');var realKey = key.substring(0, pos);// 判断此key是否已存在json数据中，不存在则新建一个数组出来if(!existKeyInJSON(realKey, resultJson)){resultJson[realKey] = [];}resultJson[realKey].push(json[key]);}else{ // 单元素resultJson[key] = json[key];}}return resultJson;};
/*** 功能：判断key在Json结构中是否存在* 存在，返回true; 否则，返回false.*/function existKeyInJSON(key, json){if(key == null || key == '' || $.isEmptyObject(json)){return false;}var exist = false;for(var k in json){if(key === k){exist = true;}}return exist;}
【说明】上面serializeNestedObject()方法调用了一个existKeyInJSON()方法，对简单的name属性，多个相同的name的值会序列化为数组，而复杂的name属性后面会覆盖前面的即只会有单一值。
调用方式：(引入jquery库文件)
var formJson = $("#fm1").serializeObject();$("#outDiv0").append(JSON.stringify(formJson));var formObj = $("#fm1").serializeNestedObject();$("#outDiv").append(JSON.stringify(formObj));
示例HTML代码：
<form id="fm1"><table><tr><td><label>学校名称：</label> </td><td><input type="text" name="collegeName" value="软件学院"/></td></tr><tr><td><label>校址：</label> </td><td><input type="text" name="location" value="滇池海梗大坝"/></td></tr><!--属性中嵌套对象形式 --><tr><td><label>博士编号：</label> </td><td><input type="text" name="doctor.dCode" value="DT_X0135"/></td></tr><tr><td><label>教龄：</label> </td><td><input type="text" name="doctor.dAge" value="10"/></td></tr><!--属性中嵌套对象形式 --><tr><td><label>讲师编号：</label> </td><td><input type="text" name="teacher.name" value="TH001"/></td></tr><tr><td><label>工龄：</label> </td><td><input type="text" name="teacher.workAge" value="15"/></td></tr><!--属性中嵌套数组等容器形式 --><tr><td><label>专业代号一：</label> </td><td><input type="text" name="profession[0].code" value="PH_SOFTWARE"/></td></tr> <tr><td><label>专业名称一：</label> </td><td><input type="text" name="profession[0].content" value="软件工程"/></td></tr><tr><td><label>课程一：</label> </td><td><input type="text" name="profession[0].course" value="C语言,Java编程,Linux服务编程"/></td></tr><tr><td><label>专业代号二：</label> </td><td><input type="text" name="profession[1].code" value="PH_COMPUTER"/></td></tr><tr><td><label>专业名称二：</label> </td><td><input type="text" name="profession[1].content" value="计算机"/></td></tr><tr><td><label>课程二：</label> </td><td><input type="text" name="profession[1].course" value="汇编语言,数据结构算法,phython编程"/></td></tr><tr><td><label>专业代号三：</label> </td><td><input type="text" name="profession[2].code" value="PH_TELINFORMATION"/></td></tr><tr><td><label>专业名称三：</label> </td><td><input type="text" name="profession[2].content" value="电子信息"/></td></tr><tr><td><label>课程三：</label> </td><td><input type="text" name="profession[2].course" value="通信原理,网络通讯"/></td></tr><!-- 序列化时，同name的value会组装成数组，对应一个name --><tr><td><label>学位A：</label> </td><td><input type="checkbox" checked name="degree" value="学士"/></td></tr><tr><td><label>学位B：</label> </td><td><input type="checkbox" checked name="degree" value="硕士"/></td></tr><!-- 会覆盖掉上面 与同name的值 --><tr><td><label>课程三(覆盖属性)：</label> </td><td><input type="text" name="profession[2].course" value="通信原理2,网络通讯2"/></td></tr></table><div style="border: 2px solid brown; height: auto;"><span>简单json序列化：</span><p id="outDiv0"></p><hr/><span>有嵌套属性json序列化：</span><p id="outDiv"></p></div></form>
后台对应的JAVA VO对象
public class College {// 简单属性private String collegeName;private String location;// 嵌套对象属性private Doctor doctor;private Teacher teacher;// 对象列表属性private List<Profession> profession;// 基本类型列表属性private List<String> degree;// …… get/set方法}//嵌套对象class Doctor{private String dCode;private String dAge;// …… get/set方法}//嵌套对象class Teacher{private String name;private String workAge;// …… get/set方法}//嵌套对象class Profession{private String code;private String content;private String course;// …… get/set方法}
