serializeArray() 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。(摘自jquery文档)。
有以下一个表单窗口，代码：
<form action="" method="post" ></form>
JavaScript代码处理表单：
<script>
$(function () {
$("#butsubmit").click(function(){
var data = convertArray($("#tf").serializeArray());
$.post(url, data, function (d) {},"json");
});
})
function convertArray(o) { //主要是推荐这个函数。它将jquery系列化后的值转为name:value的形式。
var v = {};
for (var i in o) {
if (typeof (v[o[i].name]) == 'undefined') v[o[i].name] = o[i].value;
else v[o[i].name] += "," + o[i].value;
}
return v;
}
</script>
这几天做一个Ajax像服务器动态提交的表单然后给出即时反馈.这些表单内容都是一系列的.内容大同小异.所以代码和页面结构也是大同小异.但是其中有一个页面使用AJAX始终无法提取到服务器值.反而将此页的整个render出来的页面显示出来.关键代码如下:
后台代码简略如下.只是为了让大家明白意思:
jQuery扩展 form序列化到json对象
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); |
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); |