jQuery ajax - post() method

jQuery Ajax Reference Manual

Example

Request the test.php webpage, ignore the returned value:

$.post("test.php");

Try It Yourself Example

Change the text of the div element through AJAX POST request:

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

Try It Yourself

Definition and Usage

The post() method loads data from the server using an HTTP POST request.

Syntax

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
Parameters Description
url Required. Specifies the URL to which the request is sent.
data Optional. Mapping or string value. Specifies the data sent along with the request to the server.
success(data, textStatus, jqXHR) Optional. Callback function executed when the request is successful.
dataType

Optional. Specifies the expected data type of the server response.

Default intelligent judgment (xml, json, script, or html) is executed.

Detailed Description

This function is a shorthand for the Ajax function, equivalent to:

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

The returned data passed to the success callback function varies according to the different MIME types of the response, which can be XML root element, text string, JavaScript file, or JSON object. You can also pass the text status of the response to the success callback function.

For jQuery 1.5, you can also pass jqXHR objectIn jQuery 1.4, an XMLHttpRequest object is passed).

Most implementations specify a success function:

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

This example reads the requested HTML fragment and inserts it into the page.

Pages read through POST are not cached, so jQuery.ajaxSetup() The cache and ifModified options in it will not affect these requests.

Note:Due to browser security restrictions, most "Ajax" requests comply with the same-origin policy; requests cannot successfully retrieve data from different domains, subdomains, or protocols.

Note:If the request initiated by jQuery.post() returns an error code, there will be no prompt unless the global .ajaxError() method.or for jQuery 1.5, the .error() method of the jqXHR object returned by jQuery.post() can also be used for error handling.

jqXHR object

For jQuery 1.5, all jQuery's AJAX methods return a superset of the XMLHTTPRequest object. The jQuery XHR object returned by $.post() or "jqXHR," implements the convention interface, granting it all properties, methods, and conventions. $.ajax() Considering the convenience and consistency of the callback function names used, it provides .error(), .success(), and .complete() methods. These methods use the function parameter called when the request terminates, which accepts the same parameters as the corresponding $.ajax() callback function.

The convention interface in jQuery 1.5 also allows jQuery's Ajax methods, including $.post(), to link multiple .success(), .complete(), and .error() callback functions for the same request, and even assign these callback functions if the request may already be completed.

// After the request is generated, immediately assign a handler, remember that this request is for the jqxhr object
    var jqxhr = $.post("example.php", function() {
      alert("success");
    })
    .success(function() { alert("second success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });
    // Execute other tasks here
    // Set another complete function for the above request
    jqxhr.complete(function(){ alert("second complete"); });

More Examples

Example 1

Request the test.php page and send some additional data along with it (while still ignoring the returned value):

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

Example 2

Pass a data array to the server (while still ignoring the returned value):

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

Example 3

Send form data using AJAX requests:

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

Example 4

Output the result from the requested page test.php (HTML or XML, depending on the returned content):

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

Example 5

Send data to the page test.php and output the result (HTML or XML, depending on the returned content):

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

Example 6

Obtain the content of the test.php page and store it as an XMLHttpResponse object, and then process it through the JavaScript function process():

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

Example 7

Obtain the JSON format content returned by the test.php page:

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

jQuery Ajax Reference Manual