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); }); });
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");