jQuery中$.get、$.post、$.getJSON、$.ajax 方法詳解

轉自:http://blog.csdn.net/huileiforever/article/details/12163385javascript

1、函數解釋php

jQuery.get() :使用 HTTP GET 請求從服務器加載數據html

jquery.post():使用 HTTP POST 請求從服務器加載數據
java

jQuery.getJSON():使用 HTTP GET 請求從服務器加載 JSON 編碼數據
jquery

jQuery.ajax():執行異步 HTTP (Ajax) 請求ajax

 

2、解析json

1.jQuery.get()跨域

$(selector).get(url,data,success(response,status,xhr),dataType)數組

 

url 必需。規定將請求發送的哪一個 URL。
data 可選。規定連同請求發送到服務器的數據。
success(response,status,xhr)

可選。規定當請求成功時運行的函數。瀏覽器

額外的參數:

  • response - 包含來自請求的結果數據
  • status - 包含請求的狀態
  • xhr - 包含 XMLHttpRequest 對象
dataType

可選。規定預計的服務器響應的數據類型。

默認地,jQuery 將智能判斷。

可能的類型:

  • "xml"
  • "html"
  • "text"
  • "script"
  • "json"
  • "jsonp"

 

 

簡單的 GET 請求功能以取代複雜 $.ajax 。請求成功時可調用回調函數。若是須要在出錯時執行函數,請使用 $.ajax。

例子:

 

[javascript]  view plain  copy
 
  1. $.get(  
  2.   "product?type=111",{  
  3.   id:  '123',  
  4.   name:  '青藤園',  
  5.   },function(data,state){  
  6.   //這裏顯示從服務器返回的數據  
  7.   alert(data);  
  8.   //這裏顯示返回的狀態  
  9.   alert(state);  
  10.   }  
  11. )  


該函數是簡寫的 Ajax 函數,等價於:

 

 

[javascript]  view plain  copy
 
  1. $.ajax({  
  2.   url: url,  
  3.   data: data,  
  4.   success: success,  
  5.   dataType: dataType  
  6. });  

 

 

2.jQuery.post()

post() 方法經過 HTTP POST 請求從服務器載入數據

這個方法和$.get()用法差很少,惟獨多了一個type參數,那麼這裏就只介紹type參數吧,其餘的參考上面$.get()的。

type:type爲請求的數據類型,能夠是html,xml,json等類型,若是咱們設置這個參數爲:json,那麼返回的格式則是json格式的,若是沒有設置,就和$.get()返回的格式同樣,都是字符串的。

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

 

url 必需。規定把請求發送到哪一個 URL。
data 可選。映射或字符串值。規定連同請求發送到服務器的數據。
success(data, textStatus, jqXHR) 可選。請求成功時執行的回調函數。
dataType

可選。規定預期的服務器響應的數據類型。

默認執行智能判斷(xml、json、script 或 html)。

該函數是簡寫的 Ajax 函數,等價於:

 

 

[javascript]  view plain  copy
 
  1. $.ajax({  
  2.   type: 'POST',  
  3.   url: url,  
  4.   data: data,  
  5.   success: success,  
  6.   dataType: dataType  
  7. });  
[javascript]  view plain  copy
 
  1. $.post(  
  2.   "product?type=111",{  
  3.   id:  '123',  
  4.   name:  '青藤園',  
  5.   },function(data,state){  
  6.   //這裏顯示從服務器返回的數據  
  7.   alert(data);  
  8.   //這裏顯示返回的狀態  
  9.   alert(state);  
  10.   },  
  11.   "json"  
  12. )  


3.jQuery.getJSON()
使用 AJAX 請求來得到 JSON 數據,並輸出結果

 

函數沒有type參數,返回的是json類型的,不須要轉換。

jQuery.getJSON(url,data,success(data,status,xhr))

 

url 必需。規定將請求發送的哪一個 URL。
data 可選。規定連同請求發送到服務器的數據。
success(data,status,xhr)

可選。規定當請求成功時運行的函數。

額外的參數:

  • response - 包含來自請求的結果數據
  • status - 包含請求的狀態
  • xhr - 包含 XMLHttpRequest 對象

該函數是簡寫的 Ajax 函數,等價於:

 

 

[javascript]  view plain  copy
 
  1. $.ajax({  
  2.   url: url,  
  3.   data: data,  
  4.   success: callback,  
  5.   dataType: json  
  6. });  

 

發送到服務器的數據可做爲查詢字符串附加到 URL 以後。若是 data 參數的值是對象(映射),那麼在附加到 URL 以前將轉換爲字符串,並進行 URL 編碼。

傳遞給 callback 的返回數據,能夠是 JavaScript 對象,或以 JSON 結構定義的數組,並使用 $.parseJSON() 方法進行解析。

從 test.js 載入 JSON 數據並顯示 JSON 數據中一個 name 字段數據:

 

[javascript]  view plain  copy
 
  1. $.getJSON("test.js"function(json){  
  2.   alert("JSON Data: " + json.users[3].name);  
  3. });  


4.jQuery.ajax()
執行異步 HTTP (Ajax) 請求

 

 

該方法是 jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 對象。大多數狀況下你無需直接操做該函數,除非你須要操做不經常使用的選項,以得到更多的靈活性。

最簡單的狀況下,$.ajax() 能夠不帶任何參數直接使用。

注意:全部的選項均可以經過 $.ajaxSetup() 函數來全局設置。

jQuery.ajax([settings])

 

settings

可選。用於配置 Ajax 請求的鍵值對集合。

能夠經過 $.ajaxSetup() 設置任何選項的默認值。

經過 AJAX 加載一段文本:

 

 

[javascript]  view plain  copy
 
  1. //jQuery 代碼:  
  2. $(document).ready(function(){  
  3.   $("#b01").click(function(){  
  4.   htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});  
  5.   $("#myDiv").html(htmlobj.responseText);  
  6.   });  
  7. });  
[javascript]  view plain  copy
 
  1. //HTML 代碼:  
  2. <div id="myDiv"><h2>Let AJAX change this text</h2></div>  
  3. <button id="b01" type="button">Change Content</button>  

 

 

3、區別

 

  • GET - 從指定的資源請求數據,發送至服務器的key/value數據會做爲QueryString附加到請求URL中,服務器返回數據的格式實際上是字符串形式,並非咱們想要的json數據格式
  • POST - 向指定的資源提交要處理的數據,這個函數跟$.get()參數差很少,多了一個type參數,type爲返回的數據類型,能夠是html,xml,json等類型,若是咱們設置這個參數爲:json,那麼返回的格式則是json格式的,若是沒有設置,就 和$.get()返回的格式同樣,都是字符串的
  • getJSON-使用 AJAX 請求來得到 JSON 數據,使用JSON相比傳統的經過 GET、POST直接發送「裸體」數據,在結構上更爲合理,也更爲安全。至於jQuery的getJSON()函數,只是設置了JSON參數的 ajax()函數的一個簡化版本。這個函數也是能夠跨域使用的,相比get()、post()有必定優點。另外這個函數能夠經過把請求url寫 成"myurl?callback=X"這種格式,讓程序執行回調函數X。
  • ajax()-$.ajax() 返回其建立的 XMLHttpRequest 對象

1、函數解釋

jQuery.get() :使用 HTTP GET 請求從服務器加載數據

jquery.post():使用 HTTP POST 請求從服務器加載數據

jQuery.getJSON():使用 HTTP GET 請求從服務器加載 JSON 編碼數據

jQuery.ajax():執行異步 HTTP (Ajax) 請求

 

2、解析

1.jQuery.get()

$(selector).get(url,data,success(response,status,xhr),dataType)

 

url 必需。規定將請求發送的哪一個 URL。
data 可選。規定連同請求發送到服務器的數據。
success(response,status,xhr)

可選。規定當請求成功時運行的函數。

額外的參數:

  • response - 包含來自請求的結果數據
  • status - 包含請求的狀態
  • xhr - 包含 XMLHttpRequest 對象
dataType

可選。規定預計的服務器響應的數據類型。

默認地,jQuery 將智能判斷。

可能的類型:

  • "xml"
  • "html"
  • "text"
  • "script"
  • "json"
  • "jsonp"

 

 

簡單的 GET 請求功能以取代複雜 $.ajax 。請求成功時可調用回調函數。若是須要在出錯時執行函數,請使用 $.ajax。

例子:

 

[javascript]  view plain copy
 
 
  1. $.get(  
  2.   "product?type=111",{  
  3.   id:  '123',  
  4.   name:  '青藤園',  
  5.   },function(data,state){  
  6.   //這裏顯示從服務器返回的數據  
  7.   alert(data);  
  8.   //這裏顯示返回的狀態  
  9.   alert(state);  
  10.   }  
  11. )  


該函數是簡寫的 Ajax 函數,等價於:

 

 

[javascript]  view plain copy
 
 
  1. $.ajax({  
  2.   url: url,  
  3.   data: data,  
  4.   success: success,  
  5.   dataType: dataType  
  6. });  

 

 

2.jQuery.post()

post() 方法經過 HTTP POST 請求從服務器載入數據

這個方法和$.get()用法差很少,惟獨多了一個type參數,那麼這裏就只介紹type參數吧,其餘的參考上面$.get()的。

type:type爲請求的數據類型,能夠是html,xml,json等類型,若是咱們設置這個參數爲:json,那麼返回的格式則是json格式的,若是沒有設置,就和$.get()返回的格式同樣,都是字符串的。

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

 

url 必需。規定把請求發送到哪一個 URL。
data 可選。映射或字符串值。規定連同請求發送到服務器的數據。
success(data, textStatus, jqXHR) 可選。請求成功時執行的回調函數。
dataType

可選。規定預期的服務器響應的數據類型。

默認執行智能判斷(xml、json、script 或 html)。

該函數是簡寫的 Ajax 函數,等價於:

 

 

[javascript]  view plain copy
 
 
  1. $.ajax({  
  2.   type: 'POST',  
  3.   url: url,  
  4.   data: data,  
  5.   success: success,  
  6.   dataType: dataType  
  7. });  
[javascript]  view plain copy
 
 
  1. $.post(  
  2.   "product?type=111",{  
  3.   id:  '123',  
  4.   name:  '青藤園',  
  5.   },function(data,state){  
  6.   //這裏顯示從服務器返回的數據  
  7.   alert(data);  
  8.   //這裏顯示返回的狀態  
  9.   alert(state);  
  10.   },  
  11.   "json"  
  12. )  


3.jQuery.getJSON()
使用 AJAX 請求來得到 JSON 數據,並輸出結果

 

函數沒有type參數,返回的是json類型的,不須要轉換。

jQuery.getJSON(url,data,success(data,status,xhr))

 

url 必需。規定將請求發送的哪一個 URL。
data 可選。規定連同請求發送到服務器的數據。
success(data,status,xhr)

可選。規定當請求成功時運行的函數。

額外的參數:

  • response - 包含來自請求的結果數據
  • status - 包含請求的狀態
  • xhr - 包含 XMLHttpRequest 對象

該函數是簡寫的 Ajax 函數,等價於:

 

 

[javascript]  view plain copy
 
 
  1. $.ajax({  
  2.   url: url,  
  3.   data: data,  
  4.   success: callback,  
  5.   dataType: json  
  6. });  

 

發送到服務器的數據可做爲查詢字符串附加到 URL 以後。若是 data 參數的值是對象(映射),那麼在附加到 URL 以前將轉換爲字符串,並進行 URL 編碼。

傳遞給 callback 的返回數據,能夠是 JavaScript 對象,或以 JSON 結構定義的數組,並使用 $.parseJSON() 方法進行解析。

從 test.js 載入 JSON 數據並顯示 JSON 數據中一個 name 字段數據:

 

[javascript]  view plain copy
 
 
  1. $.getJSON("test.js"function(json){  
  2.   alert("JSON Data: " + json.users[3].name);  
  3. });  


4.jQuery.ajax()
執行異步 HTTP (Ajax) 請求

 

 

該方法是 jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 對象。大多數狀況下你無需直接操做該函數,除非你須要操做不經常使用的選項,以得到更多的靈活性。

最簡單的狀況下,$.ajax() 能夠不帶任何參數直接使用。

注意:全部的選項均可以經過 $.ajaxSetup() 函數來全局設置。

jQuery.ajax([settings])

 

settings

可選。用於配置 Ajax 請求的鍵值對集合。

能夠經過 $.ajaxSetup() 設置任何選項的默認值。

經過 AJAX 加載一段文本:

 

 

[javascript]  view plain copy
 
 
  1. //jQuery 代碼:  
  2. $(document).ready(function(){  
  3.   $("#b01").click(function(){  
  4.   htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});  
  5.   $("#myDiv").html(htmlobj.responseText);  
  6.   });  
  7. });  
[javascript]  view plain copy
 
 
  1. //HTML 代碼:  
  2. <div id="myDiv"><h2>Let AJAX change this text</h2></div>  
  3. <button id="b01" type="button">Change Content</button>  

 

 

 

$.ajax()

$.ajax()是jquery中通用的一個ajax封裝,其語法的格式爲:

$.ajax(options)

其中options是一個object類型,它指明瞭本次ajax調用的具體參數,這裏我把最經常使用的幾個參數附上

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
         url: 'submit.aspx' ,
         datatype: "json" ,
         type: 'post' ,
         success: function (e) {   //成功後回調
             alert(e);
         },
         error: function (e){    //失敗後回調
             alert(e);
         },
         beforeSend: function (){  /發送請求前調用,能夠放一些 "正在加載" 之類額話
             alert( "正在加載" );
         }
})

 

 

 

 

3、區別

 

  • GET - 從指定的資源請求數據,發送至服務器的key/value數據會做爲QueryString附加到請求URL中,服務器返回數據的格式實際上是字符串形式,並非咱們想要的json數據格式
  • POST - 向指定的資源提交要處理的數據,這個函數跟$.get()參數差很少,多了一個type參數,type爲返回的數據類型,能夠是html,xml,json等類型,若是咱們設置這個參數爲:json,那麼返回的格式則是json格式的,若是沒有設置,就 和$.get()返回的格式同樣,都是字符串的
  • getJSON-使用 AJAX 請求來得到 JSON 數據,使用JSON相比傳統的經過 GET、POST直接發送「裸體」數據,在結構上更爲合理,也更爲安全。至於jQuery的getJSON()函數,只是設置了JSON參數的 ajax()函數的一個簡化版本。這個函數也是能夠跨域使用的,相比get()、post()有必定優點。另外這個函數能夠經過把請求url寫 成"myurl?callback=X"這種格式,讓程序執行回調函數X。
  • ajax()-$.ajax() 返回其建立的 XMLHttpRequest 對象
 
 

jquery的其餘一些函數:

載入靜態頁面

load( url, [data], [callback] );
url (String) 請求的HTML頁的URL地址
data (Map)(可選參數) 發送至服務器的 key/value 數據
callback (Callback) (可選參數) 請求完成時(不須要是success的)的回調函數

load()方法能夠輕鬆載入靜態頁面內容到指定jQuery對象。
$('#ajax-div').load('data.html');


這樣,data.html的內容將被載入到ID爲ajax-div的DOM對象以內。你甚至能夠經過制定ID來實現載入部份內容的Ajax操做,如:


$('#ajax-div').load('data.html#my-section');
實現GET和POST方法

get( url, [data], [callback] )
url (String) 發送請求的URL地址.
data (Map)(可選參數) 要發送給服務器的數據,以 Key/value 的鍵值對形式表示,會作爲QueryString附加到請求URL中
callback (Callback) (可選參數) 載入成功時回調函數(只有當Response的返回狀態是success纔是調用該方法)

很顯然這是一個專門實現GET方式的函數,使用起來也至關的簡單
$.get('login.jsp', {
   id      : 'Robin',
   password: '123456',
   gate    : 'index'
  }, function(data, status) {
   //data爲返回對象,status爲請求的狀態
   alert(data);
   //此時假設服務器腳本會返回一段文字"你好,Robin!",
那麼瀏覽器就會彈出對話框顯示該段文字
   alert(status);
   //結果爲success, error等等,但這裏是成功時才能運行的函數
  });

 

post( url, [data], [callback], [type] )

url (String) 發送請求的URL地址.
data (Map)(可選參數) 要發送給服務器的數據,以 Key/value 的鍵值對形式表示
callback (Callback) (可選參數) 載入成功時回調函數(只有當Response的返回狀態是success纔是調用該方法)
type (String) (可選參數) 請求數據的類型,xml,text,json等

一樣是jQuery提供的一個簡便函數,其實用法
 
$.post('regsiter.jsp', {
   id:'Robin',
   password: '123456',
   type:'user'
  },function(data, status) {
   alert(data);
  }, "json");

 

事件驅動的腳本載入函數:getScript()

getScript( url, [callback] )
url (String) 待載入 js 文件地址
callback (Function) (可選) 成功載入後回調函數

getScript()函數能夠遠程載入javascript腳本而且執行。這個函數能夠跨 域載入JS文件(神奇……?!)。這個函數的意義是巨大 的,它能夠很大程度的縮減頁面初次載入的代碼量,由於你能夠根據用戶的交互來載入相應的JS文件,而沒必要在頁面初始化的時候所有載入。
 
$.getScript('ajaxEvent.js', function() {
   alert("Scripts Loaded!");
   //載入ajaxEvent.js,而且在成功載入後顯示對話框提示。
  });

 

構建數據通信的橋樑:getJSON()

getJSON(url,[data],[callback])
url (String) 發送請求地址
data (Map) (可選) 待發送 Key/value 參數
callback (Function) (可選) 載入成功時回調函數。

JSON是一種理想的數據傳輸格式,它可以很好的融合與JavaScript或其餘宿主語 言,而且能夠被JS直接使用。使用JSON相比傳統的經過 GET、POST直接發送」裸體」數據,在結構上更爲合理,也更爲安全。至於jQuery的getJSON()函數,只是設置了JSON參數的 ajax()函數的一個簡化版本。這個函數也是能夠跨域使用的,相比get()、post()有必定優點。另外這個函數能夠經過把請求url寫 成」myurl?callback=X」這種格式,讓程序執行回調函數X。

$.getJSON('feed.jsp',{
   request: images,
   id:      001,
   size:    large
   }, function(json) {
    alert(json.images[0].link);
    //此處json就是遠程傳回的json對象,假設其格式以下:
    //{'images' : [
    // {link: images/001.jpg, x :100, y : 100},
    // {link: images/002.jpg, x : 200, y 200:}
    //]};
   }
 );

 

更底層的ajax()函數
雖然get()和post()函數很是簡潔易用,可是對於更復雜的一些設計需求仍是沒法實現,好比在ajax發送的不一樣時段作出不一樣的動做等。jQuery提供一個更爲具體的函數:ajax()。

ajax( options )
ajax()提供了一大票參數,因此能夠實現至關複雜的功能。

參數名 類型 描述 
url String (默認: 當前頁地址) 發送請求的地址。 
type String (默認: 「GET」) 請求方式 (「POST」 或 「GET」), 默認爲 「GET」。
注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可使用,但僅部分瀏覽器支持。 
timeout Number 設置請求超時時間(毫秒)。此設置將覆蓋全局設置。 
async Boolean (默認: true) 默認設置下,全部請求均爲異步請求。
若是須要發送同步請求,請將此選項設置爲 false。
注意,同步請求將鎖住瀏覽器,用戶其它操做必須等待請求完成才能夠執行。 
beforeSend Function 發送請求前可修改 XMLHttpRequest 對象的函數,如添加自定義 HTTP 頭。

XMLHttpRequest 對象是惟一的參數。

function (XMLHttpRequest) {
this; // the options for this ajax request
}


 
cache Boolean (默認: true) jQuery 1.2 新功能,設置爲 false 將不會從瀏覽器緩存中加載請求信息。 
complete Function 請求完成後回調函數 (請求成功或失敗時均調用)。

參數: XMLHttpRequest 對象,成功信息字符串。

function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}


 
contentType String (默認: 「application/x-www-form-urlencoded」) 發送信息至服務器時內容編碼類型。默認值適合大多數應用場合。
data Object,
String 發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。
查看 processData 選項說明以禁止此自動轉換。必須爲 Key/Value 格式。
若是爲數組,jQuery 將自動爲不一樣值對應同一個名稱。
如 {foo:["bar1", "bar2"]} 轉換爲 ‘&foo=bar1&foo=bar2′。 
dataType String 預期服務器返回的數據類型。若是不指定,jQuery 將自動根據 HTTP 包 MIME 信息
返回 responseXML 或 responseText,並做爲回調函數參數傳遞,可用值:

「xml」: 返回 XML 文檔,可用 jQuery 處理。

「html」: 返回純文本 HTML 信息;包含 script 元素。

「script」: 返回純文本 JavaScript 代碼。不會自動緩存結果。

「json」: 返回 JSON 數據 。

「jsonp」: JSONP 格式。使用 JSONP 形式調用函數時,

如 「myurl?callback=?」 jQuery 將自動替換 ? 爲正確的函數名,以執行回調函數。
 
error Function (默認: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。

這個方法有三個參數:XMLHttpRequest 對象,錯誤信息,(可能)捕獲的錯誤對象。

function (XMLHttpRequest, textStatus, errorThrown) {
// 一般狀況下textStatus和errorThown只有其中一個有值
this; // the options for this ajax request
}


 
global Boolean (默認: true) 是否觸發全局 AJAX 事件。設置爲 false 將不會觸發全局 AJAX 事件,

如 ajaxStart 或 ajaxStop 。可用於控制不一樣的Ajax事件
 
ifModified Boolean (默認: false) 僅在服務器數據改變時獲取新數據。

使用 HTTP 包 Last-Modified 頭信息判斷。
 
processData Boolean (默認: true) 默認狀況下,發送的數據將被轉換爲對象(技術上講並不是字符串)

以配合默認內容類型 「application/x-www-form-urlencoded」。

若是要發送 DOM 樹信息或其它不但願轉換的信息,請設置爲 false。
 
success Function 請求成功後回調函數。這個方法有兩個參數:服務器返回數據,返回狀態

function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this;
 // the options for this ajax request
}

 

 

你 能夠指定xml、script、html、json做爲其數據類型,能夠爲beforeSend、error、sucess、complete等狀態設置 處理函數,衆多其它參數也能夠訂完徹底全定義用戶的Ajax體驗。下面的例子中,咱們用ajax()來調用一個XML文檔:

$.ajax({
    url: 'doc.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        alert(xml);
  //此處xml就是XML的jQuery對象了,你能夠用find()、next()或XPath等方法在裏面尋找節點,
和用jQuery操做HTML對象沒有區別
    }
});


進一步瞭解AJAX事件
前面討論的一些方法都有本身的事件處理機制,從頁面總體來講,都只能說是局部函數。jQuery提供了AJAX全局函數的定義,以知足特殊的需求。下面是jQuery提供的全部函數(按照觸發順序排列以下):

ajaxStart
(全局事件) 開始新的Ajax請求,而且此時沒有其餘ajax請求正在進行
beforeSend
(局部事件) 當一個Ajax請求開始時觸發。若是須要,你能夠在這裏設置XMLHttpRequest對象
ajaxSend
(全局事件) 請求開始前觸發的全局事件
success
(局部事件) 請求成功時觸發。即服務器沒有返回錯誤,返回的數據也沒有錯誤
ajaxSuccess
全局事件全局的請求成功
error
(局部事件) 僅當發生錯誤時觸發。你沒法同時執行success和error兩個回調函數
ajaxError
全局事件全局的發生錯誤時觸發
complete
(局部事件) 無論你請求成功仍是失敗,即使是同步請求,你都能在請求完成時觸發這個事件
ajaxComplete
全局事件全局的請求完成時觸發
ajaxStop
(全局事件) 當沒有Ajax正在進行中的時候,觸發
局部事件在以前的函數中都有介紹,咱們主要來看看全局事件。對某個對象進行全局事件監聽,那麼全局中的AJAX動做,都會對其產生影響。好比,當頁面在進行AJAX操做時,ID爲」loading」的DIV就顯示出來:

 
$("#loading").ajaxStart(function(){
   $(this).show();
 });

 

全局事件也能夠幫助你編寫全局的錯誤相應和成功相應,而不須要爲每一個AJAX請求獨立設置。有必要指出,全局事件的參數是頗有用的。除了 ajaxStart、ajaxOptions,其餘事件均有event, XMLHttpRequest, ajaxOptions三個參數。第一個參數即事件自己;第二個是XHR對象;第三個是你傳遞的ajax參數對象。在一個對象裏顯示全局的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請求時,你能夠將global的值設爲false,以將此請求獨立於AJAX的全局事件。

 
$.ajax({
   url: "request.jsp",
   global: false,
   // 禁用全局Ajax事件.
 });

 

若是你想爲全局AJAX設置參數,你會用上ajaxSetup()函數。例如,將全部AJAX請求都傳遞到request.PHP,;禁用全局方法;強制用POST方法傳遞:


$.ajaxSetup({
  url: "request.jsp",
  global: false,
  type: "POST"
});

 

一些你不得不知道的方法
寫AJAX確定離不開從頁面獲取相應的值。在這裏簡單列舉一些方法:

val() 
val()函數能夠返回表單組建的值,例如任何種類input的值。配合選擇符操做,你能夠輕易獲取選項組、輸入框、按鈕等元素的值。


$("input[name='info']:text").val();
//返回名字爲info的文本框的值
$("input[name='pass']:password").val();
//返回名字爲pass的密碼框的值
$("input[name='save']:radio").val();
//返回名字爲save的單選項的值
//以此類推

 

serialize()

serialize函數能夠幫你把表單對象的全部值都轉換爲字符串序列。若是你要寫GET格式的請求,這個就很是方便了。serializeArray()和serialize()相似,只不過它返回的是JSON對象。

相關文章
相關標籤/搜索