jquery Ajax-post () Method Example detailed _ajax related

Ajax in jquery has two data sending modes, one is get and the other is post ().

JQuery Ajax Reference Manual

Instance

Request test.php Web page, ignore return value:

$.post ("test.php");

Tiy instance

Change the text of a DIV element through an AJAX POST request:

$ ("input"). KeyUp (function () {
 txt=$ ("input"). Val ();
 $.post ("demo_ajax_gethint.asp", {suggest:txt},function (result) {
 $ (' span '). HTML (result);
 };
});

Give it a shot yourself.

Definitions and usage

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

Grammar

Jquery.post (url,data,success (data, Textstatus, JQXHR), DataType)

Detailed description

This function is shorthand for Ajax functions, equivalent to:

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

Depending on the MIME type of the response, the return data passed to the success callback function is also different, which can be an XML root element, a text string, a JavaScript file, or a JSON object. You can also pass the response's text state to the success callback function.

For jquery 1.5, you can also pass the JQXHR object to the success callback function (the XMLHttpRequest object is passed in jquery 1.4).

Most implementations will 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 the cache and ifmodified options in Jquery.ajaxsetup () do not affect these requests.

Note: Due to browser security restrictions, most "Ajax" requests adhere to the homology policy, and requests cannot successfully retrieve data from different domains, subdomains, or protocols.

Note: If the request originated by Jquery.post () returns an error code, then there is no hint unless the script has called the Global. Ajaxerror () method. or the. Error () method for the Jqxhr object returned by the JQuery 1.5,jquery.post () can also be used for error handling.

JQXHR objects

For jquery 1.5, all jquery AJAX methods return a superset of the XMLHttpRequest object. The JQuery XHR object or "JQXHR," returned by $.post () implements the agreed interface, giving all of its properties, methods, and agreed behavior. Given the convenience and consistency of callback function names used by $.ajax (), it provides. Error (),. Success () and. Complete () methods. These methods use the function arguments that are called when the request terminates, and the function accepts the same parameters as the corresponding named $.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, even after a request may have been completed Function.

To assign handlers immediately after the request is generated, remember that the 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");});
 Perform other tasks here
 
 //Set Another completion function for the above request
 Jqxhr.complete (function () {alert ("second Complete");});

More examples

Example 1

Request a test.php page and send some extra data together (while still ignoring the return value):

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

Example 2

To pass an array of data to the server (while still ignoring the return value):

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

Example 3

To send form data using an AJAX request:

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

Example 4

Output results from the request page test.php (HTML or XML, depending on what is returned):

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

Example 5

Sends data to the page test.php and outputs the result (HTML or XML, depending on what is returned):

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

Example 6

Gets the contents of the test.php page and stores it as a Xmlhttpresponse object and processes it through the JavaScript function ():

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

Example 7

Get the contents of the JSON format returned by the test.php page:

$.post ("test.php", {"Func": "Getnameandtime"},
 function (data) {
 alert (data.name);//John
 Console.log ( Data.time); 2pm
 }, "json");

The above content through examples to introduce the jquery Ajax-post () method sample detailed, I hope that the future work of everyone to learn help, in the next article will introduce jquery Ajax-get () method sample detailed, need friends please continue to pay attention to this site.