0%

3.8 Ajax相关方法 3.8.1 三个工具方法

发表于 更新于 分类于 ， ，

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">
		// 为id为bn1的按钮绑定事件处理函数
		$("#bn1").click(function () {
			// 将id为test1的表单转换为查询字符串
			$("#show").html($("#test").serialize());
		});
		// 为id为bn2的按钮绑定事件处理函数
		$("#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 () {
			// 调用$.param将对象转换为查询字符串
			$("#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对象数组

原文链接: 3.8 Ajax相关方法 3.8.1 三个工具方法