JQuery中的AJAX详解目录(?)[-]load()方法load(url,[data],[callback])url为被加载的页面地址data表示发送到服务器的数据,格式为key/valuecallback格式为: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 : 255.//经测试,变量名加引号、单引号、不加引号,后台都能取到值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("wrongname.xml",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.else11. {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: " +ers[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>[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。