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方法
}