jQuery API

jQuery.post()

jQuery.post( url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ] ) Returns: XMLHttpRequest

Description: Load data from the server using a HTTP POST request.

  • version added: 1.0jQuery.post( url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ] )

    urlA string containing the URL to which the request is sent.

    dataA map or string that is sent to the server with the request.

    success(data, textStatus, XMLHttpRequest)A callback function that is executed if the request succeeds.

    dataTypeThe type of data expected from the server.

This is a shorthand Ajax function, which is equivalent to:

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

The success callback function is passed the returned data, which will be an XML root element or a text string depending on the MIME type of the response. It is also passed the text status of the response.

As of jQuery 1.4, the success callback function is also passed the XMLHttpRequest object.

Most implementations will specify a success handler:

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

This example fetches the requested HTML snippet and inserts it on the page.

Pages fetched with POST are never cached, so the cache and ifModified options in jQuery.ajaxSetup() have no effect on these requests.

Examples:

Example: Request the test.php page, but ignore the return results.

$.post("test.php");

Example: Request the test.php page and send some additional data along (while still ignoring the return results).

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

Example: pass arrays of data to the server (while still ignoring the return results).

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

Example: send form data using ajax requests

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

Example: Alert out the results from requesting test.php (HTML or XML, depending on what was returned).

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

Example: Alert out the results from requesting test.php with an additional payload of data (HTML or XML, depending on what was returned).

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

Example: Gets the test.php page content, store it in a XMLHttpResponse object and applies the process() JavaScript function.

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

Example: Gets the test.php page contents which has been returned in json format ()

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

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for jQuery.post() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • shiva
    I want to get data not html from php then i want to use that data in php javascript is that possible. Here constraint for me is i shouldnt send html from php i will just connect to database from php then send that request back to request originator which is php again , now here i will use data coming from server side php in sclient side script to generate html, any suggestions?
  • phronesis
    please i need to pass a variable to the data as a map for example

    $.get("./index.php?"+currentUrl,{action : 'searchresultsajax', printer_friendly:'yes',key:value
    },function(data){
    if(data.length > 0){
    $("#rightpanel").html(data);
    }
    })
    }
    where key is a variable...
    pls need a response, thanks
  • Rafael Pólit
    I have found that using syntax as in the example's:
    $.post("test.php", { name: "John", time: "2pm" } );

    Yields an error on IE and Chrome (though Firefox understands it perfectly). To correct this issue, both the data's name and value need to be within quotes:
    $.post("test.php", { "name": "John", "time": "2pm" } );

    Can someone confirm this is an issue with the documentation or am I overlooking something?

    Thanks,
    Rafa.
  • Which version of IE are you using? I don't get any errors with IE8.
  • Rafael Pólit
    IE8 with all the new patches/updates/etc. It happened in Google Chrome as well.
  • Lod
    the serialize function does not send the submit button name
  • I agree.. why?
  • Chandu
    This is not working properly when I try to use with ASP.NET instead..
  • ppillip
    i agree :(
  • Hugo Lopes