jQuery ajax - post() Methode

Beispiel

Anfrage an die Webseite test.php, ignorieren Sie den Rückgabewert:

$.post("test.php");

TIY-Beispiel

Ändern Sie den Text des div-Elements durch AJAX POST-Anfrage:

$("input").keyup(function(){
  txt=$("input").val();
  $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
    $("span").html(result);
  });
});

Probieren Sie es selbst aus

Definition und Verwendung

Die post() Methode lädt Daten über eine HTTP POST-Anfrage vom Server.

Syntax

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
Parameter Beschreibung
url Erforderlich. Definiert, an welche URL die Anfrage gesendet wird.
data Optional. Abbildung oder Zeichenfolgenwert. Definiert die Daten, die zusammen mit der Anfrage an den Server gesendet werden.
success(data, textStatus, jqXHR) Optional. Rückruffunktion, die bei Erfolg des Antrags ausgeführt wird.
dataType

Optional. Definiert den erwarteten Datentyp der Serverantwort.

Standardmäßig wird eine intelligente Entscheidung getroffen (xml, json, script oder html).

Detaillierte Erklärung

Diese Funktion ist eine verkürzte Ajax-Funktion, äquivalent zu:

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

Je nach verschiedenen MIME-Typen der Antwort werden unterschiedliche Rückgabedaten an die success-Rückruffunktion übergeben, diese können XML-Elemente, Textzeichenfolgen, JavaScript-Dateien oder JSON-Objekte sein. Es kann auch der Textstatus der Antwort an die success-Rückruffunktion übergeben werden.

Für jQuery 1.5 kann auch ein success-Rückruf zur success-Rückruffunktion übergeben werden jqXHR 对象(jQuery 1.4 überträgt das XMLHttpRequest-Objekt)。

Die meisten Implementierungen legen eine success-Funktion fest:

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

本例读取被请求的 HTML 片段,并插入页面中。

通过 POST 读取的页面不被缓存,因此 jQuery.ajaxSetup() 中的 cache 和 ifModified 选项不会影响这些请求。

注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。

注释:如果由 jQuery.post() 发起的请求返回错误代码,那么不会有任何提示,除非脚本已调用了全局的 .ajaxError() 方法。或者对于 jQuery 1.5,jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。

jqXHR 对象

对于 jQuery 1.5,所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 "jqXHR,"实现了约定的接口,赋予其所有的属性、方法,以及约定的行为。出于对由 $.ajax() 使用的回调函数名称便利性和一致性的考虑,它提供了 .error(), .success() 以及 .complete() 方法。这些方法使用请求终止时调用的函数参数,该函数接受与对应命名的 $.ajax() 回调函数相同的参数。

jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法,包括 $.post(),来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数,甚至会在请求也许已经完成后分配这些回调函数。

// 请求生成后立即分配处理程序,请记住该请求针对 jqxhr 对象
    var jqxhr = $.post("example.php", function() {
      alert("success");
    })
    .success(function() { alert("second success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });
    // Hier andere Aufgaben ausführen
    // Eine weitere Complete-Funktion für die obige Anfrage festlegen
    jqxhr.complete(function(){ alert("second complete"); });

Mehr Beispiele

Beispiel 1

Anfragen Sie die Seite test.php und senden Sie einige zusätzliche Daten mit (ignoriert dennoch den zurückgegebenen Wert):

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

Beispiel 2

Senden Sie ein Datenarray an den Server (ignoriert dennoch den zurückgegebenen Wert):

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

Beispiel 3

Senden Sie Formulardaten mit ajax-Anfragen:

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

Beispiel 4

geben Sie das Ergebnis von test.php zurück (HTML oder XML abhängig vom zurückgegebenen Inhalt):

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

Beispiel 5

Senden Sie Daten an die Seite test.php und geben Sie das Ergebnis aus (HTML oder XML abhängig vom zurückgegebenen Inhalt):

$.post("test.php", { name: "Bill", time: "2pm" },
   function(data){
     alert("Daten geladen: " + data);
   });

Beispiel 6

erhalten Sie den Inhalt der test.php-Seite und speichern Sie ihn als XMLHttpResponse-Objekt und verarbeiten Sie ihn mit dem JavaScript-Funktion process():

$.post("test.php", { name: "Bill", time: "2pm" },
   function(data){
     process(data);
   }, "xml");

Beispiel 7

erhalten Sie das als JSON-Format zurückgegebene Inhalt der test.php-Seite:

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