$. Post and $. ajax usage in Jquery

$. Post and $. ajax usage in Jquery

This section focuses on the most common methods for calling ajax in jquery: $. post, and $ ajax. If you do not have any knowledge about javascript or jquery, or you do not have any idea about ajax, ask du Niang and read this article.

$. Ajax usage of Jquery:

JQuery. ajax (options): loads remote data through HTTP requests. This is jQuery's underlying AJAX implementation. For easy-to-use high-level implementation, see $. get, $. post, and so on.

$. Ajax () returns the created XMLHttpRequest object. In most cases, you do not need to directly operate on this object, but in special cases it can be used to manually terminate the request.

Note: If you specify the ype option, make sure that the server returns the correct MIME information (for example, xml returns "text/xml "). Incorrect MIME types may cause unpredictable errors. See Specifying the Data Type for AJAX Requests.

When the datatype type is set to 'script', all remote (not in the same domain) POST requests are switched to GET.

$. Ajax () has only one parameter: The parameter key/value object, which contains information about various configurations and callback functions. For detailed Parameter options, see.

In jQuery 1.2, you can load JSON data across domains. You need to set the data type to JSONP during use. When calling a function in the form of JSONP, such as "myurl? Callback =? "Will jQuery be replaced automatically? For the correct function name to execute the callback function. When the data type is set to "jsonp", jQuery automatically calls the callback function. (I don't quite understand this)

Jquery ajax parameter list:

Url (String)

(Default: Current page address) the address of the request sent.

Type (String)

Request Method (two parameters are available: "POST" and "GET"). The default value is "GET ". Note: Other HTTP request methods, such as PUT and DELETE, can also be used, but are only supported by some browsers.

Timeout (Number)

Set the request timeout (in milliseconds ). This setting overwrites the global setting.

Async (Boolean)

(Default: true) when it is set to true, all requests are asynchronous requests. To send a synchronization request, set this option to false. Note: The synchronous request locks the browser. Other operations can be performed only after the request is completed.

BeforeSend (Function)

Before sending a request, you can modify the function of the XMLHttpRequest object, for example, adding a custom HTTP header. The XMLHttpRequest object is a unique parameter.

The Code is as follows:

Function (XMLHttpRequest ){

This; // the options for this ajax request

}

Cache (Boolean)

Whether to set the request result to cache (default: true). Setting it to false will not load the request information from the browser cache. Note that it is best to set it to false at the early stage of development, otherwise debugging is inconvenient.

Complete (Function)

Callback Function after the request is complete (called when the request is successful or fails ). Parameter: XMLHttpRequest object, success information string.

The Code is as follows:

Function (XMLHttpRequest, textStatus ){

This; // theoptionsforthisajaxrequest

}

ContentType (String)

(Default: "application/x-www-form-urlencoded") Content Encoding type when sending information to the server. The default value is applicable to most applications.

Data (Object, String)

The data sent to the server. Will be automatically converted to the request string format. The GET request will be appended to the URL. View the description of the processData option to disable automatic conversion. It must be in Key/Value format. If it is an array, jQuery automatically corresponds to the same name for different values. For example, {foo: ["bar1", "bar2"]} is converted to '& foo = bar1 & foo = bar2 '.

DataType (String)

Defines the data type returned by the server. If this parameter is not specified, jQuery will automatically return responseXML or responseText Based on the MIME information of the HTTP package and pass it as a callback function parameter. Available values:

"Xml": Return XML format data, which can be processed by jQuery.

"Html": returns plain text HTML data, which can contain script elements.

"Script": returns plain text JavaScript code. Results are not automatically cached.

"Json": Return JSON data.

"Jsonp": JSONP format. When calling a function in the form of JSONP, such as "myurl? Callback =? "Will jQuery be replaced automatically? For the correct function name to execute the callback function.

Error (Function)

(Default: automatically determines (xml or html) This method is called when a request fails. This method has three parameters: XMLHttpRequest object, error message, and (possibly) captured error object.

Copy the Code as follows:

Function (XMLHttpRequest, textStatus, errorThrown ){

// Generally, textStatus and errorThown have only one value.

This; // theoptionsforthisajaxrequest

}

Global (Boolean)

Whether to trigger a global AJAX event (default: true ). Setting false does not trigger global AJAX events, such as ajaxStart or ajaxStop. Can be used to control different Ajax events

IfModified (Boolean)

(Default: false) obtain new data only when the server data changes. Use the Last-Modified header information of the HTTP packet to determine.

ProcessData (Boolean)

Set the Message format for sending data (default: true). When it is set to true, the data sent will be converted to an object (technically not a string) with the default content type "application/x-www-form-urlencoded ". If you want to send the DOM tree information or other information that does not want to be converted, set it to false.

Success (Function)

Callback Function after successful request. This method has two parameters: the server returns data and returns the status.

The Code is as follows:

Function (data, textStatus ){

// DatacouldbexmlDoc, jsonObj, html, text, etc...

This; // theoptionsforthisajaxrequest

}

The following uses an example to explain the specific usage of this 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: // www.www.daimajiayuan.com/rss ', 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 (){ // Handle request errors } });

For more specific jquery ajax usage instructions, see here: http://www.w3school.com.cn/jquery/ajax_ajax.asp

$. Post usage of Jquery:

3. jQuery. post (url, [data], [callback], [type]): Use the POST method for asynchronous requests.

Jquery $. post method parameter list (description ):

Url (String): the URL of the request.

Data (Map): (optional) data to be sent to the server, expressed in Key/value pairs. You can put this value in the url.

Callback (Function): (optional) callback Function when the load is successful (this method can be called only when the Response returns success ).

Type (String): (optional) Data type requested by the client (JSON, XML, etc)

This is a simple POST Request function to replace complex $. ajax. You can call the callback function when the request is successful. To execute a function when an error occurs, use $. ajax.

The following is a simple sample code using $. post:

?

1 2 3 4 5 6 7 8 9 10

$. Post ( 'Http: // www.daimajiayuan.com/ajax.php ', {Action: "post", Name: "lulu "}, Function (data, textStatus ){ // Data can be xmlDoc, jsonObj, html, text, and so on. // This; // configure the options of this Ajax request. For details, refer to this mentioned in jQuery. get (). Alert (data. result ); }, "Json" // The return format of the request is set to "json" );

If you set the request format to "json", you have not set the ContentType returned by Response to: Response. contentType = "application/json"; then you cannot capture the returned data.

Note: In the preceding example, alert (data. result); because the Accept header is set to "json", the returned data is an object, so you do not need to use eval () to convert it to an object.

The above is all the content of this article. I hope you will like it.