JQuery Ajax Instance Detailed ($.ajax, $.post, $.get) _ajax related

Source: Internet
Author: User
Tags http request serialization string format browser cache

jquery is very well encapsulated in asynchronous submissions and is very cumbersome to use Ajax directly, and jquery simplifies our operations without considering the surprise of browsers.

Recommend a good jquery Ajax instance article, forget to go to see,

The address is: http://www.jb51.net/article/26903.htm

$.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

. $.ajax asynchronous request with JSON data var AJ = $.ajax ({url: ' productmanager_reverseupdate ',//Jump to action data:{Selrollback : Selrollback, Seloperatorscode:seloperatorscode, Provincecode:provincecode, Pass:pass}, type: ' Post ', Cache:false, DataType: ' JSON ', success:function (data) {if (data.msg = = "true") {//view ("Successful modification!"). 
    "); Alert ("Modified successfully!") 
    "); 
   Window.location.reload (); 
   }else{view (data.msg); }, Error:function () {//view (Exception!) 
   "); Alert ("Exception!") 
  ");
 } 
 }); . $.ajax the asynchronous Request function Notips () {var Formparam = $ ("#form") of the table contents as a string. Serialize ();//Serialization table contents are string $.ajax ({type : ' Post ', url: ' Notice_notipsnotice ', Data:formparam, Cache:false, DataType: ' JSON ', Success:function (da 
 TA) {}}); 
  //.$.ajax asynchronous request for stitching URL var yz=$.ajax ({type: ' post ', url: ' validatepwd_checkpwd?password= ' +password, data:{}, Cache:false, DataType: ' JSON ', success:function (data) {if (data.msg= = "false")//the server returns false, changing the value of ValidatePassword to Pwderror, which is asynchronous, and needs to consider the return time {textpassword.html ("<font color= ' Red ' &G t; the business password is incorrect! 
    </font> "); 
    $ ("#validatePassword"). Val ("Pwderror"); 
    Checkpassword = false; 
   Return 
 }}, Error:function () {}}); The asynchronous request $.ajax ({URL: ' <%=request.getcontextpath ()%>/kc/kc_checkmernameunique.action ', type: ' $.ajax concatenation of data. 
  Post ', data: ' Mername= ' +values, Async:false,//default to True asynchronous Error:function () {alert (' Error '); 
  }, Success:function (data) {$ ("#" +divs). HTML (data); }
 });

Here's an AJAX () that provides a lot of parameters, so it's a very complex feature to implement.

Name of parameter Type Describe
Url String (Default: Current page address) sends the requested address.
Type String (Default: "Get") Request method ("POST" or "get"), default to "get".
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) The default setting is that 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'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.

[JavaScript] View Plaincopy
    1. function (XMLHttpRequest) {
    2. This ;  //The options for this AJAX request   
    3. }


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

Parameters: XMLHttpRequest Object, Success message string.

[JavaScript] &NBSP; view Plaincopy
    1. function (XMLHttpRequest, textstatus) {
    2. This ;  //The options for this AJAX request   
    3. }


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 The type of data expected to be returned by the server. If not specified, JQuery will automatically follow the HTTP package MIME information
Returns the Responsexml or ResponseText and passes as a callback function parameter, available values:

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

HTML: Returns plain text HTML information, including script elements.

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

"JSON": Returns JSON data.

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

Like "myurl?callback=?" JQuery will automatically replace? 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.

[JavaScript] &NBSP; view Plaincopy
    1. function (XMLHttpRequest, Textstatus, Errorthrown) {
    2. //Usually only one of the Textstatus and Errorthown has a value   
    3. This ;  //The options for this AJAX request   
    4. }


Global Boolean (default: TRUE) triggers a global AJAX event. Set 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 (default: TRUE) by default, the data sent 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

[JavaScript] &NBSP; view Plaincopy
    1. function (data, textstatus) {
    2. //data could be xmldoc, jsonobj, HTML, text, etc ...   
    3. This  ;
    4. //The options for this AJAX request   
    5. }


The above is described in this article on jquery ajax Examples of detailed information ($.ajax, $.post, $.get) of the relevant data, I hope to learn about jquery Ajax examples to help.

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.