本文介绍了一个jQuery扩展方法，用于将HTML表单数据序列化为JSON对象。除了处理普通键值对，该方案还通过解析点号分隔的属性名（如category.id），支持将表单数据映射为包含子对象的复杂JSON结构，从而更贴合后端Domain Class的定义。
jQuery表单序列化基础实现
实现代码如下：
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
} 处理嵌套对象结构的挑战
上述函数适用于常规的表单字段转换。然而，当遇到表单字段名包含嵌套结构（如使用点号分隔）且需要映射到后端包含子对象的领域模型时，该基础方法无法直接支持。
例如，考虑以下HTML表单结构：
代码示例如下：
<form id="testform">
<input type="text" name="name" value="dummyName" id="name">
<input type="text" name="category.id" value="categoryId" id="name">
<input type="text" name="category.name" value="categoryName" id="name">
</form>该表单对应后端服务器端的领域类定义如下：
代码示例如下：
public class DummyProduct {
private DummyCategory category;
private String name;
public DummyCategory getCategory() {
return category;
}
public void setCategory(DummyCategory category) {
this.category = category;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
public class DummyCategory {
private String id;
private String name;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
} 支持嵌套属性的序列化扩展方案
若需将表单数据序列化为与后端领域类结构匹配的JSON字符串，可使用以下扩展方案：
代码示例如下：
/** @serializedParams looks like "prop1=value1&prop2=value2".
Nested property like 'prop.subprop=value' is also supported **/
function paramString2obj (serializedParams) {
var obj={};
function evalThem (str) {
var attributeName = str.split("=")[0];
var attributeValue = str.split("=")[1];
if(!attributeValue){
return ;
}
var array = attributeName.split(".");
for (var i = 1; i < array.length; i++) {
var tmpArray = Array();
tmpArray.push("obj");
for (var j = 0; j < i; j++) {
tmpArray.push(array[j]);
};
var evalString = tmpArray.join(".");
// alert(evalString);
if(!eval(evalString)){
eval(evalString+"={};");
}
};
eval("obj."+attributeName+"='"+attributeValue+"';");
};
var properties = serializedParams.split("&");
for (var i = 0; i < properties.length; i++) {
evalThem(properties[i]);
};
return obj;
}
$.fn.form2json = function(){
var serializedParams = this.serialize();
var obj = paramString2obj(serializedParams);
return JSON.stringify(obj);
} 使用方式大致如下：
代码示例如下：
var json = $("#testform").form2json();
alert(json);