JQuery Ajax Instance Code ($.AJAX, $.post, $.get) _jquery

Source: Internet
Author: User
Tags script tag serialization browser cache

$.post, $.get is a simple method, if you want to deal with complex logic, still need to use the Jquery.ajax ()

General format of $.ajax

$.ajax ({

   type: ' POST ',

   url:url,

  data:data,

  success:success,

  datatype:datatype

});

Ii. Description of $.ajax parameters

Parameter description

Url Necessary. Specify which URL to send the request to.
Data Optional. The mapping or string value. Specify the data to be sent to the server along with the request.
Success (data, Textstatus, JQXHR) Optional. The callback function to execute when the request succeeds.
DataType

Optional. Specify the data type of the expected server response.

The default execution of intelligent judgments (XML, JSON, script, or HTML).

Third, $.ajax need to pay attention to some places:

1.data main methods are three kinds, HTML splicing, JSON array, form form by serialize () serialization, by datatype specified, do not specify intelligent judgment.

2.$.ajax only submits form in text mode, if the asynchronous commit includes <file> uploads is passed over, need to use Jquery.form.js $.ajaxsubmit

Four, $.ajax my practical application example

1.$.ajax asynchronous request with JSON data var AJ = $.ajax ({url: ' productmanager_reverseupdate ',//Jump to action data:{Selrollba 
  Ck:selrollback, Seloperatorscode:seloperatorscode, Provincecode:provincecode, Pass2:pass2 
      }, type: ' Post ', Cache:false, DataType: ' JSON ', success:function (data) {if (data.msg = = "true") { View ("Modified successfully!") 
      "); Alert ("Modified successfully!") 
      "); 
    Window.location.reload (); 
    }else{view (data.msg); }, Error:function () {//view (Exception!) 
     "); Alert ("Exception!") 
   ");


} 
}); 2.$.ajax serialized table contents As String asynchronous request function Notips () {var Formparam = $ ("#form1"). Serialize ()//Serialization table content is String $.ajax ({ty PE: ' Post ', url: ' Notice_notipsnotice ', Data:formparam, Cache:false, DataType: ' JSON ', success:fun 
Ction (data) {}}); //3.$.ajax asynchronous request for concatenation URL var yz=$.ajax ({type: ' post ', url: ' validatepwd2_checkpwd2?password2= ' +password2, data : {}, Cache:false, DataType: ' JSon ', success:function (data) {if (data.msg = = "false")//server returns FALSE, the ValidatePassword2 value is changed to Pwd2error, this is asynchronous, you need to consider returning Time {textpassword2.html ("<font color= ' red ' > Business password is incorrect!) 
        </font> "); 
        $ ("#validatePassword2"). Val ("Pwd2error"); 
        CheckPassword2 = false; 
      Return 


}}, Error:function () {}}); 4.$.ajax Asynchronous request $.ajax ({URL: ' <%=request.getcontextpath ()%>/kc/kc_checkmernameunique.action ', type: ' P  
  OST ', data: ' Mername= ' +values, Async:false,//default to True asynchronous Error:function () {alert (' Error ');  
  }, Success:function (data) {$ ("#" +divs). HTML (data); }
});

URL: The requested address is sent for a string type parameter, which defaults to the current page address.

Type: A parameter of type string is required, and the request method (post or get) defaults to get. Note Other HTTP request methods, such as put and

Delete can also be used, but only partially supported by browsers.

Timeout: Requires a parameter of type number to set the request timeout (in milliseconds). This setting overrides the global set of the $.ajaxsetup () method

Reset

Async: Parameter required for Boolean type, default set to True, all requests are asynchronous requests.

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 must wait for other actions

You cannot execute until the request is completed.

Cache: Parameter of Boolean type required, default is True (default is False when datatype is script).

Set to False will not load request information from the browser cache.

Data: Requires an object or string type of parameter to be sent to the server. If it is no longer a string, it is automatically converted to a string lattice

Expression The GET request is appended to the URL. To prevent this automatic conversion, you can view the ProcessData option. The object must be Key/value

, such as {foo1: "Bar1", Foo2: "Bar2"} is converted to &FOO1=BAR1&FOO2=BAR2. If it is an array, jquery will automatically be different

Value corresponds to the same name. For example, {foo:["bar1", "Bar2"]} is converted to &FOO=BAR1&FOO=BAR2.

DataType: Required for String type parameter, expected server returned data type. If not specified, jquery will automatically mime based on HTTP package

The information is returned to Responsexml or ResponseText and is passed as a callback function parameter.

The available types are as follows:

XML: Returns an XML document that can be processed with jquery.

HTML: Returns plain text HTML information, and the included script tag executes when the DOM is inserted.

Script: Returns the plain text JavaScript code. Results are not automatically cached. Unless the cache parameter is set. Note that the remote request

(not in the same domain), all post requests are converted to get requests.

JSON: Returns JSON data.

JSONP:JSONP format. When you call a function using the Sonp form, for example, Myurl?callback=?,jquery automatically replaces the latter

“?” To the correct function name to execute the callback function.

Text: Returns a plain text string.

Beforesend: Requires a parameter of a function type, you can modify the function of the XMLHttpRequest object before sending the request, for example, to add a custom

HTTP headers. If you return False in Beforesend, you can cancel this Ajax request. The XMLHttpRequest object is the only parameter

Number.

function (XMLHttpRequest) {

This The options argument passed when invoking this Ajax request

}

Complete: A parameter that requires a function type that is invoked after the request completes (called when the request succeeds or fails).

Parameters: XMLHttpRequest object and a string that describes the type of successful request.

function (XMLHttpRequest, textstatus) {

This The options argument passed when invoking this Ajax request

}

Success: A parameter that requires a function type, and a callback function called after the success of the request, with two parameters.

(1) The data returned by the server and processed according to the datatype parameter.

(2) A string describing the state.

function (data, textstatus) {

Data may be xmldoc, jsonobj, HTML, text, and so on

This The options argument passed when invoking this Ajax request

Error: A function that requires a parameter of a function type that is called when a request fails. The function has 3 parameters, that is, the XMLHttpRequest object, the error

False information, captured error object (optional).

The Ajax event functions are as follows:

function (XMLHttpRequest, textstatus, Errorthrown) {

Usually only one of the Textstatus and Errorthrown contains information

This The options argument passed when invoking this Ajax request

}

ContentType: Requires a String type parameter, when sending information to the server, the content encoding type defaults

As "application/x-www-form-urlencoded". This default value is appropriate for most applications.

Datafilter: A function that requires preprocessing of the original data returned by Ajax for parameters of the function type.

Provides data and type two parameters. Data is the original of the Ajax return, type is provided when the Jquery.ajax is invoked

DataType parameter. The value returned by the function will be further processed by jquery.

function (data, type) {

Returns the processed data

return data;

}

Global: A parameter of a Boolean type is required, and the default is true. Indicates whether global AJAX events are triggered. Set to false will not trigger global

Ajax events, Ajaxstart, or ajaxstop can be used to control various AJAX events.

Ifmodified: Parameter required for Boolean type, default to False. Gets new data only when the server data changes.

The server data change judgment is based on last-modified header information. The default value is False, which is to ignore header information.

JSONP: Requires an argument of type string to override the name of the callback function in a JSONP request.

This value is used in place of the "callback=?" The "callback" section of the URL parameter in this get or POST request, for example

{jsonp: ' onjsonpload '} will cause the "onjsonpload=?" passed to the server.

Username: A parameter of type string that is required to respond to the user name of an HTTP access authentication request.

Password: A parameter of type string that is required to respond to the password for HTTP access authentication requests.

ProcessData: Parameter required for Boolean type, default to True. By default, the data sent is converted to an object (from a technical perspective

is not a string) to match the default content type "application/x-www-form-urlencoded". If you want to send the DOM

Tree information or other information that you do not want to convert, set to False.

Scriptcharset: A parameter of type string that is required only if the request is datatype "JSONP" or "script" and the type is a get

is used to force the character set (charset) to be modified. Typically used when local and remote content encodings are different.

Case code:

$ (function () {
 
$ (' #send '). Click (function () {
 
$.ajax ({
 
type: "Get",
 
URL: "Test.json",
 
data: {US ername:$ ("#username"). Val (), content:$ ("#content"). Val ()},
 
DataType: "JSON",    success:function (data {    $ (' #resText '). empty ();//Clear all content in ResText    var html = ';    $.each (data, function ( Commentindex, comment) {     html + = ' + comment[' username ']+ ': + ';
      } ';     $ (' #resText '). HTML ( HTML);     }});
 
});            

By the way, the $.each () function:

The $.each () function differs from each () method of the JQuery object, which is a global function that does not manipulate the jquery object, but instead takes an array or object as the 1th argument, with a callback function as the 2nd argument. The callback function has two parameters: The 1th is the object's member or the index of the array, and the 2nd is the corresponding variable or content.

The above jquery Ajax example code ($.AJAX, $.post, $.get) is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.

Related Article

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.