A detailed interpretation of jquery's $.get (), $.post (), $.ajax (), $.getjson () usage

Source: Internet
Author: User

1, $.get

The $.get () method uses the Get method to make an asynchronous request with the syntax structure:

$.get (URL [, data] [, callback])

Explain each parameter of this function:

Url:string type, the address of the AJAX request.

Data: Optional parameter, object type, Key/value data sent to the server is appended to the request URL as querystring.

Callback: Optional parameter, function type, which is called automatically when Ajax returns successfully.

$.get () Example:

$.get ("data.php", $ ("#firstName. Val ()"), function (data) {

$ ("#getResponse"). HTML (data); The data returned by}//is a string type

);

2, $.post ()

The $.post () method uses the Post method to make an asynchronous request with the syntax structure:

$.post (Url,[data],[callback],[type])

This method is similar to $.get (), except that there is one more type parameter, so here is only the type parameter bar, other references above $.get ().

Type:type is the requested data type, can be a type of Html,xml,json, if we set this parameter to: JSON, then the returned format is in JSON format, if not set, and $.get () return the same format, is a string.

$.post () Example:

$.post ("data.php", $ ("#firstName. Val ()"), function (data) {

$ ("#postResponse"). HTML (data.name);

}, "JSON"//sets the type of get data, so the resulting data format is JSON-type

);

3, $.getjson ()

$.getjson () is set up to get JSON data specifically for Ajax, and supports cross-domain calls in the following syntax:

Getjson (Url,[data],[callback])

Url:string type, send request address

Data: Optional parameter, to be sent Key/value parameter, same as Get,post type of data

Callback: Optional parameter, callback function for load success, same as Get,post type callback

JSON is an ideal data transmission format, it can be well fused with JavaScript or other host language, and can be used directly by JS. Using JSON to send "naked" data directly through GET, post, is structurally more reasonable and more secure. As for jquery's Getjson () function, it's just a simplified version of the Ajax () function that sets the JSON parameter. This function can also be used across domains, with a certain advantage over get () and post (). In addition, this function can be used to write the request URL as a "myurl?callback=x" format, so that the program executes the callback function X.

$.getjson ("data.php", $ ("#firstName. Val ()"), function (Jsondata) {

$ ("#getJSONResponse"). HTML (jsondata.id);} Without setting, the data type is directly obtained as JSON,
So you need to use the Jsondata.id method when calling

);

4, $.ajax ()

$.ajax () is a common Ajax package in jquery, with the syntax in the following format:

$.ajax (Options)

Where options is an object type, it indicates the specific parameters of this Ajax call, and here I enclose some of the most commonly used parameters

$.ajax({

        url: ‘data.php‘,

        datatype: "json",

        type: ‘post‘,

        success: function(e) {   //成功后回调

            alert(e);

        },

        error: function(e){    //失败后回调

            alert(e);

        },

        beforeSend: function(){  /发送请求前调用,可以放一些"正在加载"之类额话

            alert("正在加载");

        }

})

Ajax (Options)

Name of parameter Type Describe
Url String (Default: Current page address) sends the requested address.
Type String (Default: "Get") The Request method ("POST" or "get"), the default is "get".
Note: Other HTTP request methods, such as PUT and DELETE, can also be used, but only some browsers support it.
Timeout Number Sets the request time-out (in milliseconds). This setting overrides the global settings.
Async Boolean (default: TRUE) by default, all requests are asynchronous requests.
If you need to send a synchronization request, set this option to false.
Note that the sync 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.

function (XMLHttpRequest) {this;//the "options for this" Ajax request} function (XMLHttpRequest) {this;//the options For this AJAX request}

Cache Boolean (default: TRUE) JQuery 1.2 new feature, set to False will not load the request information from the browser cache.
Complete Function The callback function after the request completes (called when the request succeeds or fails).

Parameters: XMLHttpRequest Object, Success information string.

function (XMLHttpRequest, textstatus) {this;//the options for this Ajax request} function (XMLHttpRequest, textstatus) {This;//the options for this AJAX request}
ContentType String (Default: "application/x-www-form-urlencoded") the content encoding type when sending information to the server. The default values are suitable for most applications.
Data Object,
String
Data sent to the server. is automatically converted to the request string format. The GET request will be appended to the URL.
View the ProcessData option description to disallow this automatic conversion. Must be a key/value format.
If an array, JQuery automatically corresponds to the same name for the different values.
such as {foo:["bar1", "Bar2"]} is converted to ' &foo=bar1&foo=bar2′.
DataType String Expected data type returned by the server. If not specified, JQuery will automatically be based on the HTTP packet MIME information
Returns Responsexml or ResponseText, and is passed as a callback function parameter, with the available values:

"XML": Returns an XML document that can be processed with jQuery.

HTML: Returns plain text HTML information, including the script element.

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

"JSON": Returns the JSON data.

"JSONP": Jsonp format. When a function is called using the JSONP form,

Like "myurl?callback=?" JQuery will be replaced automatically? is the correct function name to execute the callback function.

Error Function (Default: This method is called when a request for automatic judgment (XML or HTML) fails.)

This method has three parameters: the XMLHttpRequest object, the error message, and (possibly) the error object being captured.

function (XMLHttpRequest, textstatus, Errorthrown) {//normally textstatus and Errorthown only one of which has the value of this; Jax Request} function (XMLHttpRequest, textstatus, Errorthrown) {//normally textstatus and Errorthown only one has the value of this;//the Opti ONS for this AJAX request}
Global Boolean (default: TRUE) whether to trigger global AJAX events. Setting to False will not trigger a global AJAX event.

such as Ajaxstart or Ajaxstop. Can be used to control different AJAX events

Ifmodified Boolean (default: false) to get new data only when the server data changes.

Use the HTTP packet last-modified header information to determine.

ProcessData Boolean (default: TRUE) by default, the sent data 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

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

function (data, textstatus) {//data could be xmldoc, jsonobj, HTML, text, etc ... this;//the options for this Ajax requ EST} function (data, textstatus) {//data could be xmldoc, jsonobj, HTML, text, etc ... this;//the options for this AJA X Request}

A detailed interpretation of jquery's $.get (), $.post (), $.ajax (), $.getjson () usage

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: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.