3.8 Ajax相关方法
jQuery的另一个吸引人的功能就是它所提供的Ajax 支持。jQuery 提供了大量关于Ajax的工具方法,这些工具方法可以帮助开发者完成Ajax开发的大量通用操作,开发者只需指定发送Ajax请求的URL、回调函数即可,甚至连回调函数都可以省略。
3.8.1 三个工具方法
jQuery为Ajax提供了三个工具方法,这三个工具方法的功能很强大,它们不仅可用于处理表单,也可用于处理一个或多个表单控件。下面是关于这三个方法的简要说明
jQuery名字空间下的param方法
| 方法 |
描述 |
jQuery.param(object) |
将object参数(对象或数组)转换成查询字符串。 |
jQuery对象的方法
| 方法 |
描述 |
serialize() |
将jQuery对象包含的表单或表单控件转换成查询字符串。 |
serializeArray() |
将jQuery对象包含的表单或表单控件转换为一个对象数组,每个数组元素都是形如{name:fieldName,value:fieldValue}的对象,其中fieldName 是对应表单控件的name属性,fieldValue是对应表单控件的value属性。 |
程序示例
下面的页面程序示范了这两个工具方法的用法。
程序清单：codes\03\3.8\serialize.html
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| <!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 处理表单 </title>
</head>
<body>
<form id="test">
用户名：<input id="user" name="user" type="text" /><br />
个人介绍：<textarea id="desc" name="desc"></textarea><br />
喜欢的图书：
<select id="book" name="book">
<option value="java">疯狂Java讲义</option>
<option value="javaee">轻量级Java EE企业应用实战</option>
<option value="ajax">疯狂前端开发讲义</option>
</select>
</form>
<button id="bn1">查询字符串</button>
<button id="bn2">查询JSON对象</button>
<button id="bn3">将对象转换为查询字符串</button>
<hr />
<span id="show"></span>
<script type="text/javascript" src="../jquery-3.1.1.js">
</script>
<script type="text/javascript">
$("#bn1").click(function () {
$("#show").html($("#test").serialize());
});
$("#bn2").click(function () {
var arr = $(":input").serializeArray();
$("#show").empty();
for (var index in arr) {
$("#show").append("第" + index + "表单控件名为：" +
arr[index].name + ",值为：" + arr[index].value + "<br />");
}
});
$("#bn3").click(function () {
$("#show").html('{name:"疯狂Java讲义", price:109}' +
'转换出的查询字符串为：<br/>' +
$.param({
name: "疯狂Java讲义",
price: 109
}));
});
</script>
</body>
</html>
|
这个页面程序中的两个按钮分别使用了serialize方法和serializeArray方法来处理表单,第三个按钮则使用param方法将JavaScript对象转换成查询字符串。
在浏览器中浏览该页面,为页面上两个文本框输入内容,为1个下拉列表框选择值,然后
单击页面上第一个按钮。第一个按钮调用**serialize方法将表单内所有表单控件的名值对转换为查询字符串**。此时可以看到如下输出:
1
| user=xiaoming&desc=%E6%88%91%E6%98%AF%E5%B0%8F%E6%98%8E&book=java
|
单击页面上的第二个按钮。第二个按钮调用serializeArray方法将该表单内所有表单控件名值对转换为JavaScript对象数组。此时可以看到如下输出:
1
2
3
| 第0表单控件名为：user,值为：xiaoming
第1表单控件名为：desc,值为：我是小明
第2表单控件名为：book,值为：java
|
单击页面上的第三个按钮。第三个按钮调用param方法将JavaScript对象转换为查询字符串。此时可以看到如下输出:
1
2
| {name:"疯狂Java讲义", price:109}转换出的查询字符串为：
name=%E7%96%AF%E7%8B%82Java%E8%AE%B2%E4%B9%89&price=109
|
总结
jQuery.param方法可以把JavaScript对象转换成查询字符串jQuery对象.serialize方法可以把所有表单控件的值转换成查询字符串jQuery对象.serializeArray方法可以把所有表单控件的值转换为JavaScript对象数组