jQuery.post()

admin發表於2017-02-25
jQuery

此方法通過HTTP POST請求從伺服器載入資料。

語法結構:

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

引數解析:

（1）.url:規定把請求傳送到哪個URL。

（2）.data:可選，對映或字串值。規定連同請求傳送到伺服器的資料。

（3）.success:可選，請求成功時執行的回撥函式。具有三個引數，data是請求返回的資料，textStatus是請求狀態文字(例如"success"、 "notmodified")，jqXHR是當前jqXHR物件(jQuery 1.4及之前版本，該引數為原生的XMLHttpRequest物件)。

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

jQuery1.0版本新增。

此方法相當於$.ajax()方法：

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

根據響應的不同的MIME型別，傳遞給success回撥函式的返回資料也有所不同，這些資料可以是XML根元素、文字字串、JavaScript檔案或者JSON物件。也可向 success回撥函式傳遞響應的文字狀態。

也可以向success回撥函式傳遞jqXHR物件（jQuery1.4中傳遞的是XMLHttpRequest 物件）。

大部分實現會規定一個success 函式：

[JavaScript] 純文字檢視 複製程式碼
$.post("ajax/test.html", function(data) {
   $(".result").html(data);
});

本例讀取被請求的HTML片段，並插入頁面中。

通過POST讀取的頁面不被快取，因此jQuery.ajaxSetup()中的 cache 和 ifModified 選項不會影響這些請求。

註釋：由於瀏覽器安全方面的限制，大多數 "Ajax" 請求遵守同源策略；請求無法從不同的域、子域或協議成功地取回資料。

註釋：如果由 jQuery.post() 發起的請求返回錯誤程式碼，那麼不會有任何提示，除非指令碼已呼叫了全域性的 .ajaxError() 方法。或者jQuery.post() 返回的 jqXHR 物件的 .error() 方法也可以用於錯誤處理。

jqXHR 物件:

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

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

[JavaScript] 純文字檢視 複製程式碼
// 請求生成後立即分配處理程式，請記住該請求針對 jqxhr 物件
var jqxhr = $.post("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] 純文字檢視 複製程式碼
$.post("test.php", { name: "John", time: "2pm" } );

請求test.php頁面，並一起傳送一些額外的資料（同時仍然忽略返回值）。

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

向伺服器傳遞資料陣列（同時仍然忽略返回值）.

[JavaScript] 純文字檢視 複製程式碼
$.post("test.php", $("#testform").serialize());

使用 ajax 請求傳送表單資料。

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

輸出來自請求頁面 test.php 的結果（HTML 或 XML，取決於所返回的內容）。

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

向頁面test.php傳送資料，並輸出結果（HTML 或 XML，取決於所返回的內容）。

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

獲得test.php頁面的內容，並儲存為XMLHttpResponse物件，並通過process()函式進行處理。

[JavaScript] 純文字檢視 複製程式碼
$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");

獲得test.php頁面返回的json格式的內容。

相關文章