Details of ajax-post () method examples in jQuery, jqueryajax

Details of ajax-post () method examples in jQuery, jqueryajax

Ajax in jquery has two data transmission modes: get and post ().

JQuery Ajax Reference Manual

Instance

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

$. Post ("test. php ");

TIY instance

Use ajax post to change the text of the div element:

$("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 through an http post request.

Syntax

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

Detailed description

This function is short for Ajax functions and is equivalent:

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

The data returned to the success callback function varies depending on the MIME type of the response. The data can be an XML root element, text string, JavaScript file, or JSON object. You can also pass the response text status 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 define a success function:

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

In this example, read the requested HTML segment and insert it into the page.

Pages read through POST are not cached. Therefore, the cache and ifModified options in jQuery. ajaxSetup () do not affect these requests.

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

Note: if an error code is returned for a request initiated by jQuery. post (), no prompt is prompted unless the script has called the Global. ajaxError () method. The. error () method of the jqXHR object returned by jQuery 1.5 and jQuery. post () can also be used for error handling.

JqXHR object

For jQuery 1.5, all AJAX Methods return the superset of the XMLHTTPRequest object. The jQuery XHR object or "jqXHR," returned by $. post () implements the agreed interface and grants all its attributes, methods, and agreed behaviors. For the convenience and consistency of callback function names used by $. ajax (), it provides the. error (),. success (), and. complete () methods. These methods use the function parameters called upon request termination. The function accepts the same parameters as the corresponding $. ajax () callback function.

The agreed interface in jQuery 1.5 also allows jQuery's Ajax methods, including $. post () to link multiple of the same request. success (),. complete () and. the error () callback function may even be allocated after the request is completed.

// Allocate the handler immediately after the request is generated. Remember that the request is targeted at 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 completion function jqxhr for the preceding request. complete (function () {alert ("second complete ");});

More instances

Example 1

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

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

Example 2

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

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

Example 3

Use ajax requests to send form data:

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

Example 4

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

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

Example 5

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

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

Example 6

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

$.post("test.php", { name: "John", 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); // John console.log(data.time); // 2pm }, "json");

The above example introduces the ajax-post () method in jQuery, hoping to help you in your future work and study, in the next article, we will introduce the ajax-get () method examples in jquery. If you need them, please stay tuned to this site.