當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery jQuery.post()用法及代碼示例


用法 
jQuery.post( url [, data ] [, success ] [, dataType ] ) => jqXHR

說明：使用 HTTP POST 請求向服務器發送數據。

  • 添加的版本：1.0jQuery.post( url [, data ] [, success ] [, dataType ] )

    • url
      類型：String
      包含請求發送到的 URL 的字符串。
    • data
      類型：PlainObject 或 String
      與請求一起發送到服務器的普通對象或字符串。
    • success
      類型：Function(PlainObject數據，String文本狀態，jqXHRjqXHR)
      請求成功時執行的回調函數。如果提供了dataType，則為必需，但在這種情況下可以是null。
    • dataType
      類型：String
      服務器預期的數據類型。默認值：智能猜測(xml、json、腳本、文本、html)。

  • 添加的版本：1.12-and-2.2jQuery.post( [settings ] )

    • settings
      類型：PlainObject
      一組配置 Ajax 請求的鍵/值對。除url 之外的所有屬性都是可選的。可以使用 $.ajaxSetup() 為任何選項設置默認值。有關所有設置的完整列表，請參閱jQuery.ajax( settings )。類型將自動設置為 POST 。

這是一個簡寫的 Ajax 函數，相當於：

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

success 回調函數傳遞返回的數據，該數據將是 XML 根元素或文本字符串，具體取決於響應的 MIME 類型。它還傳遞了響應的文本狀態。

從 jQuery 1.5 開始， 這success回調函數也傳遞了一個"jqXHR" 對象(在jQuery 1.4, 它通過了XMLHttpRequest目的)。

大多數實現將指定一個成功處理程序：

$.post( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

此示例獲取請求的 HTML 片段並將其插入頁麵。

使用POST 獲取的頁麵永遠不會被緩存，因此jQuery.ajaxSetup() 中的cache 和ifModified 選項對這些請求沒有影響。

jqXHR 對象

從 jQuery 1.5 開始，所有 jQuery 的 Ajax 方法都返回一個超集XMLHTTPRequest目的。這個 jQuery XHR 對象，或 "jqXHR," 返回$.post()實現 Promise 接口，為其提供 Promise 的所有屬性、方法和行為(參見延遲對象了解更多信息)。這jqXHR.done()(為了成功)，jqXHR.fail()(對於錯誤)，和jqXHR.always()(用於完成，無論是成功還是錯誤；在 jQuery 1.6 中添加)方法采用一個函數參數，該參數在請求終止時調用。有關此函數接收的參數的信息，請參閱jqXHR 對象的部分$.ajax()文檔。

Promise 接口還允許 jQuery 的 Ajax 方法(包括 $.get() )在單個請求上鏈接多個 .done() 、 .fail() 和 .always() 回調，甚至可以在請求完成後分配這些回調。如果請求已經完成，則立即觸發回調。

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });
 
// Perform other work here ...
 
// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second finished" );
});

棄用通知

jqXHR.success(),jqXHR.error()， 和jqXHR.complete()回調方法是從 jQuery 3.0 開始刪除.您可以使用jqXHR.done(),jqXHR.fail()， 和jqXHR.always()反而。

其他注意事項：

  • 由於瀏覽器安全限製，大多數 "Ajax" 請求都受製於 same origin policy ；請求無法從不同的域、子域、端口或協議成功檢索數據。
  • 如果帶有 jQuery.post() 的請求返回錯誤代碼，它將靜默失敗，除非腳本還調用了全局 .ajaxError() 方法。或者，從 jQuery 1.5 開始，jQuery.post() 返回的 jqXHR 對象的 .error() 方法也可用於錯誤處理。

例子：

請求test.php 頁麵，但忽略返回結果。

$.post( "test.php" );

請求test.php 頁麵並發送一些額外的數據(同時仍然忽略返回結果)。

$.post( "test.php", { name: "John", time: "2pm" } );

將數據數組傳遞給服務器(同時仍然忽略返回結果)。

$.post( "test.php", { 'choices[]': [ "Jon", "Susan" ] } );

使用 Ajax 請求發送表單數據

$.post( "test.php", $( "#testform" ).serialize() );

警告請求 test.php(HTML 或 XML，取決於返回的內容)的結果。

$.post( "test.php", function( data ) {
  alert( "Data Loaded: " + data );
});

使用額外的數據負載(HTML 或 XML，取決於返回的內容)通過請求 test.php 來提醒結果。

$.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });

發布到test.php頁麵，獲取已經以json格式返回的內容(<?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>)。

$.post( "test.php", { func: "getNameAndTime" }, function( data ) {
  console.log( data.name ); // John
  console.log( data.time ); // 2pm
}, "json");

使用 Ajax 發布表單並將結果放入 div

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.post demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form action="/" id="searchForm">
  <input type="text" name="s" placeholder="Search...">
  <input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
 
<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
 
  // Stop form from submitting normally
  event.preventDefault();
 
  // Get some values from elements on the page:
  var $form = $( this ),
    term = $form.find( "input[name='s']" ).val(),
    url = $form.attr( "action" );
 
  // Send the data using post
  var posting = $.post( url, { s: term } );
 
  // Put the results in a div
  posting.done(function( data ) {
    var content = $( data ).find( "#content" );
    $( "#result" ).empty().append( content );
  });
});
</script>
 
</body>
</html>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 jQuery.post()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。