Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結

詳細解讀Jquery各Ajax函式：
$.get(),$.post(),$.ajax(),$.getJSON()

一、$.get(url,[data],[callback])

說明：url為請求地址，data為請求資料的列表，callback為請求成功後的回撥函式，該函式接受兩個引數，第一個為伺服器返回的資料，第二個引數為伺服器的狀態，是可選引數。

而其中，伺服器返回資料的格式其實是字串形勢，並不是我們想要的json資料格式，在此引用只是為了對比說明。

$.get("data.php",$("#firstName.val()"),function(data){
$("#getResponse").html(data); }//返回的data是字串型別
);

二、$.post(url,[data],[callback],[type])

 

說明：這個函式跟$.get()引數差不多，多了一個type引數，type為請求 的資料型別，可以是html,xml,json等型別，如果我們設定這個引數為：json，那麼返回的格式則是json格式的，如果沒有設定，就 和$.get()返回的格式一樣，都是字串的

程式碼如下:

  

$.post("data.php",$("#firstName.val()"),function(data){
$("#postResponse").html(data.name);
},"json"//設定了獲取資料的型別，所以得到的資料格式為json型別的
);

三、$.ajax(opiton)

 說明：$.ajax()這個函式功能強大，可以對ajax進行許多精確的控制。

$.ajax({
url: "ajax/ajax_selectPicType.aspx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});

四、$.getJSON(url,[data],[callback])

$.getJSON("data.php",$("#firstName.val()"),function(jsonData){
$("#getJSONResponse").html(jsonData.id);}//無需設定，直接獲取的資料型別為json，所以呼叫時需要使用jsonData.id方式
);

五、載入靜態頁面

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.php', {
   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.php', {
   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.php',{
   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 } 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 } 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 } 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 } 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肯定離不開從頁面獲取相應的值。在這裡簡單列舉一些方法：

 

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物件。