【学习笔记】锋利的jQuery（四）AJAX

时间：2022-12-11 21:35:22

一、load()方法

/*

 *如果没有参数传递，采用GET方式传递

 *如果有参数，则自动转换成POST方式传递

 *无论Ajax是否请求成功，请求完成后回调函数触发

 */

load("test.html")

load("test.html .para")  //加载html里中有para类的DOM

load("test.php",{name:"rain",age:""},function(responseText,textStatus,XMLHttpRequest){

   //responseText:   请求返回的内容

   //textStatus:     请求状态：success/error/notmodified/timeout 4种

   //XMLHttpRequest: XMLHttpRequest对象

})

二、$.get()与$.post()方法

$.get()与$.post()的区别：

1，GET请求将参数跟在URL后传递，POST则是作为HTTP消息的实体内容发送给服务器。

2，GET对传输的数据有大小限制，通常不大于2KB，POST不限制。

3，GET方式请求的数据会被浏览器缓存起来，数据会泄漏，而POST可以避免此类安全问题。

/*

 *get和post的结构和使用方式都一样

 *只有ajax请求的数据成功返回，回调函数才会被调用

 */

$.get("test.php",{name:"rain",age:""},function(data,textStatus){//GET方法的参数也可以用字符串方式

   //data:        返回的数据：XML/JSON/HTML等

   //textStatus:  请求状态：success/error/notmodified/timeout 4种

},"json")   //如果期望返回数据为json格式，将参数设为"json"

三、$.getScript()与$.getJson()方法

$.getScript("jq.color.js",fn)  //当js加载完后，执行回调函数

//可以通过getJSON中使用JSONP加载跨域的JSON数据

$.getJSON("test.json",function(data){ //data: 返回的json数据

   //$.each()用于遍历对象和数组，return false退出each循环

   $.each(data,function(i,item){

   //i：   data中对象成员或数组的索引值

   //item：data对应的变量或内容

   })

})

四、通用Ajax方法：$.ajax()

$.ajax({

   type: "GET",         //请求方式GET/POST，默认GET

   url: "test.json",    //发送请求的地址

   dataType: "json",    //预期服务器返回的数据类型

   global: true,        //是否触发全局Ajax事件，默认为true（触发）

   beforeSend: function(XMLHttpRequest){},   //发送请求前

   complete: function(XMLHttpRequest,textStatus){}  //请求完成时（成功或失败）

   success: function(data,textStatus) {  //请求成功后的回调函数

      $.each(data,fn);

   },

   error: function(XMLHttpRequest,textStatus,errorThrown) //请求失败时

})

五、jQuery中的Ajax全局事件

//fn指回调函数(callback)

ajaxStart(fn)

ajaxStop(fn)

ajaxComplete(fn)

ajaxError(fn)

ajaxSend(fn)

ajaxSuccess(fn)

//如果想某个Ajax请求不受全局方式影响

$.ajax({

   global: false;

})

六、系列化元素的方法

//序列化为字符串

serialize()

$("#form").serialize()   //整个表单的参数

$(":checkbox,:radio").serialize()  //选中的参数

//序列化为JSON格式数据

serializeArray()

$("#form").serializeArray()

$(":checkbox,:radio").serializeArray()

//对一个数组或对象序列化

$.param()

var obj = {a:,b:,c:};

$.param(obj);  //结果为a=1&b=2&c=3

相关文章