jQuery Ajax实例各种使用方法详解

Posted 2020-07-08

在jquery中ajax实现方法分类很多种，如有：load、jQuery.get、jQuery.post、jQuery.getScript、jQuery Ajax 事件、jQuery.ajaxSetup等等，前面几种为常用的也是用得最多的jquery ajax方法了，我下面给大家来详细介绍这里ajax实现方法。

 jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

示例
请求 test.php 网页，忽略返回值：

代码如下	复制代码
$.get("test.php");

例子 1

请求 test.php 网页，传送2个参数，忽略返回值：

代码如下	复制代码
$.get("test.php", { name: "John", time: "2pm" } );

例子 2

显示 test.php 返回值(html 或 XML，取决于返回值)：

代码如下	复制代码
$.get("test.php", function(data){   alert("Data Loaded: " + data); });

例子 3
显示 test.cgi 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数：

代码如下	复制代码
$.get("test.cgi", { name: "John", time: "2pm" },   function(data){     alert("Data Loaded: " + data);   });

例子 4

代码如下	复制代码
$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图 alert(data); //alert(textStatus);//请求状态：success，error等等。 当然这里捕捉不到error，因为error的时候根本不会运行该回调函数 //alert(this); });

jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：

Ajax.aspx：

代码如下	复制代码
Response.ContentType = "application/json"; Response.Write("{result: ‘" + Request["Name"] + ",你好！(这消息来自服务器)‘}");jQuery 代码：  $.post("Ajax.aspx", { Action: "post", Name: "lulu" }, function (data, textStatus){ // data 可以是 xmlDoc, jsonObj, html, text, 等等. //this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this alert(data.result); }, "json");

1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

•url：是指要导入文件的地址。 
•data：可选参数；因为Load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件时，我们可以把要传递的参数放在这里。
•callback：可选参数；是指调用load方法并得到服务器响应后，再执行的另外一个函数。

一：如何使用data

1.加载一个php文件，该php文件不含传递参数

代码如下	复制代码
$("#myID").load("test.php");

//在id为#myID的元素里导入test.php运行后的结果
2. 加载一个php文件，该php文件含有一个传递参数

代码如下	复制代码
$("#myID").load("test.php",{"name" : "Adam"});

//导入的php文件含有一个传递参数，类似于：test.php?name=Adam
3. 加载一个php文件，该php文件含有多个传递参数。注：参数间用逗号分隔

代码如下	复制代码
$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});

//导入的php文件含有一个传递参数，类似于：test.php?name=Adam&site=61dh.com
4. 加载一个php文件，该php文件以数组作为传递参数

代码如下	复制代码
$("#myID").load("test.php",{‘myinfo[]‘, ["Adam", "61dh.com"]});

//导入的php文件含有一个数组传递参数。
注意：使用load，这些参数是以POST的方式传递的，因此在test.php里，不能用GET来获取参数。

二：如何使用callback

比如我们要在load方法得到服务器响应后，慢慢地显示加载的内容，就可以使用callback函数。代码如下：

代码如下	复制代码
$("#go").click(function(){   $("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){     $("#myID").fadeIn(‘slow‘);}   ); });

 

备注：

在load的url里加上空格后面就可以跟选择器了。

例如：

代码如下	复制代码
$("body").load("test.html #a");

这个方法可以很方便的动态加载一些HTML文件，例如表单。

示例代码：

代码如下	复制代码
$(".ajax.load").load("1500682.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]  //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 });

jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

参数
url (String) : 待载入 JS 文件地址。

callback (Function) : (可选) 成功载入后回调函数。

通过 HTTP GET 请求载入并执行一个 javascript 文件。

jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

参数
url,[callback]String,FunctionV1.0url:待载入 JS 文件地址。

callback:成功载入后回调函数。

示例
描述:
载入 <a title="/color" class="external text" href="h/color">jQuery 官方颜色动画插件</a> 成功后绑定颜色变化动画。

代码如下	复制代码
HTML 代码: <button id="go">» Run</button> <div class="block"></div>jQuery 代码: jQuery.getScript("/jquery.color.js", function(){   $("#go").click(function(){     $(".block").animate( { backgroundColor: ‘pink‘ }, 1000)       .animate( { backgroundColor: ‘blue‘ }, 1000);   }); });

描述:

加载并执行 test.js。

jQuery 代码:

$.getScript("test.js");

描述:

加载并执行 test.js ，成功后显示信息。

jQuery 代码:

代码如下	复制代码
$.getScript("test.js", function(){   alert("Script loaded and executed."); });

jQuery Ajax 事件

Ajax会触发很多事件。
有两种事件，一种是局部事件，一种是全局事件：

局部事件：通过$.ajax来调用并且分配。

代码如下	复制代码
$.ajax({     beforeSend: function(){      // Handle the beforeSend event     },     complete: function(){      // Handle the complete event     }     // ... });

全局事件，可以用bind来绑定，用unbind来取消绑定。这个跟click/mousedown/keyup等事件类似。但他可以传递到每一个DOM元素上。

代码如下	复制代码
$("#loading").bind("ajaxSend", function(){ //使用bind     $(this).show(); }).ajaxComplete(function(){  //直接使用ajaxComplete     $(this).hide(); });

当然，你某一个Ajax请求不希望产生全局的事件，则可以设置global:false

代码如下	复制代码
$.ajax({    url: "test.html",    global: false,    // ...  });

事件的顺序如下：
ajaxStart 全局事件
开始新的Ajax请求，并且此时没有其他ajax请求正在进行。
beforeSend 局部事件
当一个Ajax请求开始时触发。如果需要，你可以在这里设置XHR对象。
ajaxSend 全局事件
请求开始前触发的全局事件
success 局部事件
请求成功时触发。即服务器没有返回错误，返回的数据也没有错误。
ajaxSuccess 全局事件
全局的请求成功
error 局部事件
仅当发生错误时触发。你无法同时执行success和error两个回调函数。
ajaxError 全局事件
全局的发生错误时触发
complete 局部事件
不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件。
ajaxComplete 全局事件
全局的请求完成时触发
ajaxStop 全局事件
当没有Ajax正在进行中的时候，触发。

局部事件回调的参数在文档中写的很清楚了，这里就不累述了。

全局事件中，除了ajaxStart和ajaxStop之外，其他的事件都有3个参数
event, XMLHttpRequest, ajaxOptions
第一个是事件，第二个是XHR对象，第三个参数最有用，是当时调用这个ajax的时候的参数。
对于ajaxError,还有第四个参数thrownError，只有当异常发生时才会被传递。
我们可以利用ajaxOptions来写一个全局的ajax事件。
比如

代码如下	复制代码
$("#msg").beforeSend(function(e,xhr,o) {     $(this).html("正在请求"+o.url); }).ajaxSuccess(function(e,xhr,o) {     $(this).html(o.url+"请求成功"); }).ajaxError(function(e,xhr,o) {     $(this).html(o.url+"请求失败"); });

对于这个例子，
这样我们就可以很方便的全局地在某个地方显示当前的ajax状态。
当然，之前说了，第三个参数实际上是传递给ajax的参数。get/post/load/getScript/getJSON等方法本质上都是调用ajax方法的，所以ajaxOptions.url属性总是有效的。

还有更丰富的例子。
如果你用ajax调用，还可以传递自定义参数。下面的例子我就自定义了一个msg参数给了ajax调用

代码如下

复制代码

//自定义参数msg $.ajax({url:"test1.html",type:"get",msg:"页面一"}); $.ajax({url:"test2.html",type:"get",msg:"页面二"}); $.ajax({url:"test3.html",type:"get",msg:"页面三"}); $.ajax({url:"test4.html",type:"get",msg:"页面四"});   //这里就能获取到自定义参数msg。 //这可以用来区别对待不同的ajax请求。 $("#msg").beforeSend(function(e,xhr,o) {     $(this).html("正在请求"+o.msg); }).ajaxSuccess(function(e,xhr,o) {     $(this).html(o.msg+"请求成功"); }).ajaxError(function(e,xhr,o) {     $(this).html(o.msg+"请求失败"); });