jQuery ajax - post() methode

jQuery Ajax Referentiemanual

Voorbeeld

Verzoek test.php-pagina, negeer de retourwaarde:

$.post("test.php");

TIY Voorbeeld

Verander de tekst van het div-element via een AJAX POST-aanvraag:

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

Probeer het zelf

Definitie en gebruik

De post() methode laadt gegevens via een HTTP POST-aanvraag van de server.

Syntaxis

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
Parameters Beschrijving
url Verplicht. Bepalen van de URL waarnaar de aanvraag moet worden gestuurd.
data Optioneel. Mappen of stringwaarden. Bepalen van de gegevens die samen met de aanvraag naar de server worden gestuurd.
success(data, textStatus, jqXHR) Optioneel. Terugroepfunctie die wordt uitgevoerd bij een succesvolle aanvraag.
dataType

Optioneel. Bepalen van het verwachte gegevenstype van de serverreactie.

Standaard uitvoeren van intelligente inschatting (xml, json, script of html).

Uitleg

Deze functie is een afgekorte Ajax-functie, equivalent aan:

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

Afhankelijk van het verschillende MIME-type van de respons, zijn de doorgegeven retourgegevens van de success-terugroepfunctie ook verschillend, deze gegevens kunnen XML-elelement, tekststring, JavaScript-bestand of JSON-object zijn. Men kan ook de tekststatus van de respons doorgeven aan de success-terugroepfunctie.

Voor jQuery 1.5 kan men ook de success-terugroepfunctie doorgeven jqXHR 对象（jQuery 1.4 ontvangt het een XMLHttpRequest-object）。

De meeste implementaties bepalen een success-functie:

$.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"); });
    // Voer hier andere taken uit
    // Stel een andere voltooiingsfunctie in voor de bovenstaande aanvraag
    jqxhr.complete(function(){ alert("second complete"); });

Meer voorbeelden

Voorbeeld 1

Verzoek de pagina test.php op en stuur enkele extra gegevens mee (terwijl de retourwaarde nog steeds wordt genegeerd):

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

Voorbeeld 2

Verstuur een gegevensarray naar de server (terwijl de retourwaarde nog steeds wordt genegeerd):

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

Voorbeeld 3

Verstuur formuliergegevens via een ajax-verzoek:

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

Voorbeeld 4

Geef het resultaat weer dat wordt geretourneerd door de pagina test.php (HTML of XML, afhankelijk van de geretourneerde inhoud):

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

Voorbeeld 5

Verstuur gegevens naar de pagina test.php en geef het resultaat weer (HTML of XML, afhankelijk van de geretourneerde inhoud):

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

Voorbeeld 6

verkrijg de inhoud van de test.php-pagina en sla deze op als een XMLHttpResponse-object, en verwerk deze door middel van de JavaScript-functie process():

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

Voorbeeld 7

verkrijg de json-formaat inhoud die wordt geretourneerd door de test.php-pagina:

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

jQuery Ajax Referentiemanual