JQuery中的AJAX详解
目录(?)[-]
1. load方法
2. getJSON方法
3. getScript方法
4. get方法
5. post方法
6. serialize方法
7. ajax方法
8. ajaxSetup方法
9. ajaxStart和ajaxStop及其他全局事件
load()方法
load(url,[data],[callback])
url为被加载的页面地址
data表示发送到服务器的数据，格式为key/value
callback格式为：function(responseText,textStatus,XMLHttpRequest){ }
//responseText:请求返回的内容
//textStatus:请求状态：success、error、notmodified、timeout这4种
//XMLHttpRequest:XMLHttpRequest对象
load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST方式
[javascript] view plaincopyprint?
1. $("#div1").load(
2. "jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass"，则表示获取jsp页面中类名为filterClass的全部元素
3. {
4. name ：clf, age : 25
5. //经测试，变量名加引号、单引号、不加引号，后台都能取到值
6. //如果含有中文，必须用encodeURI()进行编码，然后再服务器端用decodeURI()解码即可，如
7. // {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()},
8. }, //也可以用数组传值，{"attr []",["clf","25","male"]}
9. function (){
10. $("#div2").text("AJAX");
11. }
12. );
[javascript] view plaincopyprint?
1. $("div").load("l",function(response,status,xhr){
2. if (status=="success")
3. {
4. $("div").html("<ol></ol>");
5. $(response).find("artist").each(function(){
6. <span style="white-space:pre"> </span>varitem_text = $(this).text();
7. <span style="white-space:pre"> </span>$('<li></li>').html(item_text).appendTo('ol');
8. <span style="white-space:pre"> </span> });
9. }
10. else
11. {
12. $("div").html("Anerror occured: <br/>" + xhr.status + " " + xhr.statusText)
13. }
14. });
getJSON()方法
getJSON(url,[data],[callback])
callback格式为function(data,textStatus) { }
data是一个返回的json对象
[javascript] view plaincopyprint?
1. $.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){
2. alert("JSON Data: " +json.users[3].name);
3. });
getScript()方法
getScript(url,[callback])
callback格式为function(response,status)
response - 包含来自请求的结果数据
status - 包含请求的状态（"success","notmodified", "error", "timeout" 或"parsererror"）
通过此函数注入的脚本会自动执行
get()方法
get(url,data,callback(response,status,xhr),dataType)
dataType可能的类型："xml"、"html" 、"text"、 "script"、 "json"、 "jsonp"
get() 方法通过远程 HTTPGET 请求载入信息。
post()方法
post(url,data,callback(response,status,xhr),dataType)
与get()方法类似
get()方法不适合传递数据量较大的数据，同时，其请求的历史信息会保存在浏览器的缓存中，有一定的风险，而以post()方法则不存在这方面的不足
serialize()方法
serialize() 方法通过序列化表单值，创建URL 编码文本字符串。
可以选择一个或多个表单元素（比如input 及/或文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
[html] view plaincopyprint?
1. <form>
2. <div><input type="text"name="a" value="1" id="a" /></div>
3. <div><input type="text"name="b" value="2" id="b" /></div>
4. <div><input type="hidden"name="c" value="3" id="c" /></div>
5. <div>
6. <textarea name="d"rows="8" cols="40">4</textarea>
7. </div>
8. <div><select name="e">
9. <option value="5"selected="selected">5</option>
10. <option value="6">6</option>
11. <option value="7">7</option>
12. </select></div>
13. <div>
14. <input type="checkbox"name="f" value="8" id="f" />
15. </div>
16. <div>
17. <input type="submit"name="g" value="Submit" id="g" />
18. </div>
19. </form>
jquery在一个元素后追加标签[javascript] view plaincopyprint?
1. $('form').submit(function(){
2. alert($(this).serialize());
3. return false;
4. });
输出标准的查询字符串：
a=1&b=2&c=3&d=4&e=5
注释：只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。当表单中有多项被选中时，该方法只能传递一项的值
ajax()方法
1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论