jQuery没有直接支持form到json的序列化方法,目前网上有一个实现是这样的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$.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;
}
|
这个function对于普通的对象转换是足够的,但是如果出现对象内部又包含子对象的情形就不能支持了。
例如我有这样的一个form表单:
1
2
3
4
5
|
<
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
>
|
对应到server端上的domain class是这样的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
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;
}
}
|
如果想把表单数据序列化成跟server端domain class匹配的json字符串,就可以使用我下面的这个扩展
1
|
/** @serializedParams looks like
"prop1=value1&prop2=value2"
.
|
1
|
Nested property like
'prop.subprop=value'
is also supported **/
|
1
|
function
paramString2obj (serializedParams) {
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
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);
}
|
使用起来大概像这个样子:
1
2
|
var
json = $(
"#testform"
).form2json();
alert(json);
|