jQuery.get()

admin發表於2017-02-25
jQuery

此方法使用一個HTTP GET請求從伺服器載入資料。

如果jQuery.get()請求返回一個錯誤程式碼，它會靜靜的失敗，除非指令碼呼叫全域性的.ajaxError()方法。在jQuery1.5， 通過jQuery.get()返回的jqXHR物件的error()方法也可用於錯誤處理。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
jQuery.get(url [, data ] [, success(data,textStatus,jqXHR)] [, dataType ])

引數解析:

（1）.url:一個包含傳送請求的URL字串。

（2）.data:可選，一個普通物件或字串，傳送請求傳遞的資料。

（3）.success:可選，當請求成功後執行的回撥函式。具有三個引數，data是請求返回的資料，textStatus是請求狀態文字(例如"success"、 "notmodified")，jqXHR是當前jqXHR物件(jQuery 1.4及之前版本，該引數為原生的XMLHttpRequest物件)。如果提供dataType選項，那麼這個success選項是必須的， 但你可以使用null或jQuery.noop作為佔位符。

（4）.dataType:可選，規定預期的伺服器響應資料型別。預設執行智慧判斷（xml、json、script或html）。

jQuery1.0版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
jQuery.get([settings ])

引數解析:

settings:一組用於配置Ajax請求的鍵/值對。除url以外的所有選項屬性都是可選。任何預設選項可以用$.ajaxSetup()設定。所有選項設定完整列表，請參閱jQuery.ajax(settings)。 type（型別）選項自動設定為GET。

jQuery1.12/2.2版本新增。

jQuery.get()方法是jQuery.ajax()方法的簡寫:

[JavaScript] 純文字檢視 複製程式碼
$.ajax({
  url: url,
  data: data,
  success: success,
  data型別:dataType
});

success回撥函式會傳入返回的資料，是根據MIME型別的響應，它可能返回的資料型別包括XML根節點, 字串, JavaScript 檔案, 或者 JSON 物件。 同時還會傳入描述響應狀態的字串。

在jQuery1.5，success回撥函式還傳遞一個“jqXHR”物件 （ 在 jQuery 1.4中 ，它傳遞的是XMLHttpRequest物件）。然而，由於JSONP形式和跨域的GET請求不使用XHR，在這些情況下， jqXHR和textStatus引數傳遞給success（成功）回撥是 undefined 。

大多數實現將指定一個成功的回撥處理程式：

[JavaScript] 純文字檢視 複製程式碼
$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});

jqXHR 物件:

從jQuery 1.5開始，所有jQuery的Ajax方法都返回一個XMLHTTPRequest物件的超集。這個通過$.get()方法返回的jQuery XHR物件，或“jqXHR”，實現了 Promise 介面，使它擁有 Promise 的所有屬性，方法和行為。jqXHR.done() (表示成功), jqXHR.fail() (表示錯誤), 和 jqXHR.always() (表示完成, 無論是成功或錯誤；在jQuery 1.6 中新增) 方法接受一個函式引數，用來請求終止時被呼叫。

Promise 介面也允許jQuery的Ajax方法, 包括 $.get(), 在一個單獨的請求中關聯到 .done(), .fail(), 和 .always() 回撥函式， 甚至允許你在請求已經結束後，指派回撥函式。如果該請求已經完成，則回撥函式會被立刻呼叫。

[JavaScript] 純文字檢視 複製程式碼
// 請求生成後立即分配處理程式，請記住該請求針對 jqxhr 物件
var jqxhr = $.get("example.php", function() {
  alert("success");
  })
  .success(function() { alert("second success"); })
  .error(function() { alert("error"); })
  .complete(function() { alert("complete"); });

  // 在這裡執行其他任務

// 為上面的請求設定另一個完成函式
jqxhr.complete(function(){ alert("second complete"); });

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
$.get("test.php");

請求 test.php 頁面, 但是忽略返回結果。

[JavaScript] 純文字檢視 複製程式碼
$.get("test.php", { name: "John", time: "2pm" } );

請求 test.php 頁面 並且傳送url引數(雖然仍然忽視返回的結果)。

[JavaScript] 純文字檢視 複製程式碼
$.get("test.php", { 'choices[]': ["Jon", "Susan"]} );

傳遞陣列形式data引數給伺服器 (雖然仍然忽視返回的結果)。

[JavaScript] 純文字檢視 複製程式碼
$.get("test.php", function(data){
  alert("Data Loaded: " + data);
});

Alert 從 test.php請求的資料結果 (HTML 或者 XML,取決於返回的結果)。

[JavaScript] 純文字檢視 複製程式碼
$.get("test.cgi", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

Alert從test.cgi請求並且傳送url引數的資料結果 (HTML 或者 XML,取決於返回的結果)。

[JavaScript] 純文字檢視 複製程式碼
$.get("test.php",
   function(data){
     $('body').append( "Name: " + data.name ) // John
              .append( "Time: " + data.time ); //  2pm
   }, "json");

獲取test.php頁面已返回的JSON格式內容 (<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>), 並且加到頁面中.

相關文章