Summary of the usage of $.post and $.ajax in jquery

Source: Internet
Author: User
Tags error handling http request json string format browser cache

This section focuses on the most commonly used of the 4 methods that invoke Ajax in jquery: $.post, and $ajax. If the reader does not have JavaScript and jquery knowledge, or does not have the concept of Ajax, then please ask the Niang first, then read this article.

The $.ajax usage of jquery:

Jquery.ajax (options): Load remote Data via HTTP requests, which is the underlying AJAX implementation of jquery. Simple and easy-to-use high-level implementation see $.get, $.post, etc.

$.ajax () returns the XMLHttpRequest object that it created. In most cases you do not need to manipulate the object directly, but in special cases you can use it to manually terminate the request.

Note: If you specify the DataType option, make sure that the server returns the correct MIME information (such as the XML return "Text/xml"). The wrong MIME type can cause unpredictable errors. See Specifying the Data Type for AJAX Requests.

When you set the DataType type ' script ', all remote (not in the same domain) post requests are converted back to get mode.

$.ajax () has only one parameter: The parameter Key/value object, which contains the configuration and callback function information. Detailed parameter options see below.

In JQuery 1.2, you can load JSON data across domains and use it to set the data type to JSONP. When calling a function using JSONP form, such as "myurl?callback=?" JQuery is automatically replaced? To the correct function name to execute the callback function. When the data type is set to "Jsonp", JQuery automatically invokes the callback function. (I don't know this very well)

jquery ajax parameter list:

URL (String)

(Default: Current page address) sends the requested address.

Type (String)

The request method (the parameter has two "POST" and "get"), the default is "got". Note: Other HTTP request methods, such as put and DELETE, are also available, but only partially supported by browsers.

Timeout (number)

Sets the request timeout (in milliseconds). This setting overrides the global setting.

Async (Boolean)

(default: TRUE) All requests are asynchronous requests when set to true. If you need to send a sync request, set this option to false. Note that the synchronization request will lock the browser and the user's other actions must wait for the request to complete before it can be executed.

Beforesend (Function)

You can modify the functions of the XMLHttpRequest object before sending the request, such as adding a custom HTTP header. The XMLHttpRequest object is the only parameter.

The code is as follows:

function (XMLHttpRequest) {

This The options for this AJAX request


Cache (Boolean)

Whether to set the request result cache (default: TRUE), set to False will not load the request information from the browser cache, note that the early development is best set to False, otherwise inconvenient debugging oh.

Complete (Function)

The callback function (called when the request succeeds or fails) after the request completes. Parameters: XMLHttpRequest Object, Success message string.

The code is as follows:

function (xmlhttprequest,textstatus) {



ContentType (String)

(Default: "application/x-www-form-urlencoded") the content encoding type when sending information to the server. Default values are appropriate for most applications.

Data (object,string)

Data sent to the server. is automatically converted to the request string format. The GET request is appended to the URL. View the ProcessData option description to prevent this automatic conversion. Must be in the Key/value format. If you are an array, JQuery will automatically correspond to the same name for different values. such as {foo:["bar1", "Bar2"]} is converted to ' &foo=bar1&foo=bar2 '.

DataType (String)

Defines the type of data returned by the server. If not specified, JQuery will automatically return Responsexml or responsetext based on the HTTP packet MIME information and pass as a callback function parameter, available values:

"XML": Returns XML Format data, which can be processed with jQuery.

HTML: Returns the plain text HTML format data, which can contain the script element.

Script: Returns the plain text JavaScript code. Results are not automatically cached.

"JSON": Returns JSON data.

"JSONP": Jsonp format. When calling a function using JSONP form, such as "myurl?callback=?" JQuery is automatically replaced? To the correct function name to execute the callback function.

Error (Function)

(Default: Automatic judgment (XML or HTML)) This method is called when a request fails. This method has three parameters: the XMLHttpRequest object, the error message, and (possibly) the error object being caught.

Copy code code as follows:

function (Xmlhttprequest,textstatus,errorthrown) {

Typically, only one of the Textstatus and Errorthown has a value.



Global (Boolean)

Whether to trigger global AJAX events (default: TRUE). Setting to FALSE will not trigger global AJAX events, such as Ajaxstart or Ajaxstop. Can be used to control different AJAX events

Ifmodified (Boolean)

(default: false) gets new data only when the server data changes. Use HTTP packet last-modified header information to determine.

ProcessData (Boolean)

Sets the information format for sending data (default: TRUE), and the data sent when set to true is converted to an object (technically not a string) to match the default content type "application/x-www-form-urlencoded". Set to False if you want to send DOM tree information or other information that you do not want to convert.

Success (Function)

callback function after successful request. This method has two parameters: the server returns the data, returns the status

The code is as follows:

function (data,textstatus) {

Datacouldbexmldoc,jsonobj,html,text,etc ...



The following example explains the specific usage of the method:


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $.ajax ({type: ' Get ', url: ' Http:// ', beforesend:function (XMLHttpRequest) {//showloading (); }, Success:function (Data,textstatus) {$ ('. Ajax.ajaxresult '). html ('); $ (' item ', data). Each (function (I,domele) {$ ('. Ajax.ajaxresult '). Append (' <li> ' +$ (Domele). Children (' title '). Text () + ' </li> '); }); }, Complete:function (xmlhttprequest,textstatus) {//hideloading ();}, Error:function () {//Request error handling}});

For more specific jquery AJAX usage instructions see here:

The $.post usage of jquery:

3. (URL, [data], [callback], [Type]): Asynchronous request using POST method

jquery $.post Method parameter list (description):

URL (String): The URL address where the request is sent.

Data (MAP): (optional) The information to be sent to the server, expressed as a Key/value key-value pair, can be placed in the URL.

Callback (function): (optional) The callback function (if the response return state is success to invoke the method) when the load succeeds.

Type (String): (optional) client-requested data type (Json,xml, etc.)

This is a simple POST request function to replace a complex $.ajax, which invokes a callback function when the request succeeds. If you need to perform a function when an error occurs, use $.ajax.

The following is a simple sample code that uses $.post:


1 2 3 4 5 6 7 8 9 10 $.post (' ', {Action: "Post", Name: "Lulu"}, Function (Data,textstatus) {// Data can be xmldoc,jsonobj,html,text, and so on. this;//the option configuration information for this Ajax request, refer to this alert (Data.result) as mentioned in Jquery.get (). "JSON"/"The requested return format is" JSON ");

If you set the requested format to "JSON", you are not setting the Response back ContentType as: Response.ContentType = "Application/json"; Then you will not be able to capture the returned data.

Note that the above example is alert (Data.result); With the Accept header "JSON" set, the data returned here is an object, so you do not need to use eval () to convert to an object.

The above mentioned is the entire content of this article, I hope you can enjoy.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.