ElmerZhang's Blog

以前公司做东西用到Ajax时，都是用我们自己写的Ajax类。但是不久前接到一个比较重要的项目，为了保证不同浏览器的兼容性，我决定采用jQuery来做Ajax。
以前只用过ProtoType，jQuery还是第一次用，只好查着手册边学边写代码。下面记一些常用的jQuery技巧：

1. 底层的Ajax请求：$.ajax();
常用参数有：
1） async:Boolean
(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

2） complete:Function
请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。

1
2
3

function (XMLHttpRequest, textStatus) {
	this; // 调用本次AJAX请求时传递的options参数
}

3） data:Object/String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2′。

4） success:Function
请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。

1
2
3
4

function (data, textStatus) {
	// data 可能是 xmlDoc, jsonObj, html, text, 等等...
	this; // 调用本次AJAX请求时传递的options参数
}

5） type:String
(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

6） url:String
(默认: 当前页地址) 发送请求的地址。

示例：保存数据到服务器，成功时显示信息。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。

1
2
3
4
5
6
7
8
9

$.ajax({
	type: "POST",
	url: "some.php",
	data: "name=John&location=Boston",
	async: false,
	success: function(msg){
		alert( "Data Saved: " + msg );
	}
});

2. 通过 HTTP GET 请求载入 JSON 数据。：$.getJSON(url, [data], [callback]);
常用参数有：
1） url:String
发送请求地址。

2） data:Map (可选)
待发送 Key/value 参数。

3） callback:Function (可选)
发送请求地址。

示例:从 test.js 载入 JSON 数据，附加参数，显示 JSON 数据中一个 name 字段数据。

1
2
3

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
	alert("JSON Data: " + json.users[3].name);
});

3. 获取和设置某元素内的HTML
1）获取：html()
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
例如：$(‘#test’).html()

2)设置：html(val)
设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
val:String 用于设定HTML内容的值

4. 创建一个元素（Element），并向其中添加内容
1）创建元素：$(Tag)
例如：要创建一个DIV，可以使用$(‘<div></div>’)，要创建一个input，可以使用$(‘<input>’)。

2）获取和设置元素属性：attr()
attr(name)：取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。name:String：属性名称。例如：$(‘img’).attr(‘src’);
attr(key, value)：为所有匹配的元素设置一个属性值。key:String：属性名称。value:Object：属性值。例如：$(“img”).attr(“src”,”test.jpg”);
attr(properties)：将一个“名/值”形式的对象设置为所有匹配元素的属性。这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用’className’ 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class )。例如：$(“img”).attr({ src: “test.jpg”, alt: “Test Image” });

3）向元素向添加内容：append(content)
向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
content:String, Element, jQuery 要追加到目标中的内容

示例：从一个options数组中取出各项内容，并创建一组Radio来供选择。

1
2
3
4
5
6
7
8
9
10
11
12
13

for (i in options) {
	var iDiv = $('
 
');
	var iLabel = $('<label></label>');
	var iRadio = $('
<input />');
	iRadio.attr({'type':'radio', 'name':'answer', 'id':'answer', 'value':i});
	iLabel.append(iRadio);
	iLabel.append(options[i]);
	iDiv.append(iLabel);
	$('#answers').append(iDiv);
}

书签