jquery 之serializeArray() 提交表单
serializeArray() 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。(摘自jquery文档)。
有以下一个表单窗口,代码:
<form action="" method="post" id="tf">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<th>姓名:</th>
<td>
<input type="text" id="txtUserName" name="UserName" />
</td>
<th>联系手机:</th>
<td>
<input type="text" name="Mobile" id="txtMobile" maxlength="11"/>
</td>
</tr>
<tr>
<td style=" text-align:center;" colspan="2">
<input type="button" value=" 提 交 " style="padding-top:3px;" name="butsubmit" id="butsubmit"/>
</td>
</tr>
</table>
</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出来的页面显示出来.关键代码如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
$(document).ready(function() {
$("#Submit").click(function() {
var a = $("#aspnetForm").serialize();
/*因为使用了masterpage,所以页面form的ID为aspnetForm*/
$.ajax({
url: "xxx.aspx",
type: "get",
data: a,
success: function(data){
$("#result").html(data);
}
});
});
});
后台代码简略如下.只是为了让大家明白意思:
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["length"] != null)
{
Response.Clear();
Response.Write("这里是回传的数据");
Response.End();
}
}
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); |
邮箱:steven9801@163.com
QQ: 48039387