Getting started with jQuery (5)

Getting started with jQuery (5)

5. Ajax applications

In jQuery, the $ ajax () method is the underlying method. The second layer is load (), $. get (), $. post (), the third layer is $. getScript () and $. getJSON (); The following describes the usage frequency.

 

1. load () method

The load () method can load remote HTML code and insert it into the DOM. (In actual projects, this method is frequently used ???!!!)

Load (url [, data] [, callback])

Form:

A. Load the HTML document

((“Tag)).load(“load.html "); // load load.html to the tag

B. filter the loaded HTML documents.

Upload (registrtagupload.load(upload.html. class "); // load the content of the class style class in the load.html document to the tag

C. Transfer Method

$ (Function (){

$ ("Tag"). load ("test. php", function (){

Alert ("if no parameter is passed, it is the GET method ");

}). Load ("test. php", {name: "test", age: "22"}, function (){

Alert ("If parameter is passed, it is POST mode ");

});

});

D. Callback Parameters

$ ("Tag"). load ("test. php", {name: "test", age: "22"}, function (responseText, textStatus, XMLHttpRequest ){

// Content returned by the responseText request

// TextStatus Request status

// XMLHttpRequest XHR object

});

 

2. $. get () method and $. post () method

The Get request limits the data size to 2 kb, while the post request does not limit the size in principle.

Put the Get data in the address bar, and put the post data in the message body.

$. Get (url [, data] [, callback] [, type])

Aa. process the returned HTML data

$ (Function (){

$ ("# Submit"). click (function (){

$. Get ("test. php ",{

Name: $ ("# name"). val (),

Content: $ ("# content"). val ()

}, Function (data, textStatus ){

Metrics (“tagtagpai.html (data );

})

});

});

 

AB. XML document

$ (Function (){

$ ("# Submit"). click (function (){

$. Get ("test. php ",{

Name: $ ("# name"). val (),

Content: $ ("# content"). val ()

}, Function (data, textStatus ){

Var name = $ (data). find ("comment"). attr ("name ");

Var content = $ (data). find ("comment content"). text ();

Var html = "<div class = 'comment'>

Name + "

Content + "</p> </div> ";

((“Tag)).html (html );

})

});

});

 

Ac. JSON File

$ (Function (){

$ ("# Submit"). click (function (){

$. Get ("test. php ",{

Name: $ ("# name"). val (),

Content: $ ("# content"). val ()

}, Function (data, textStatus ){

Var name = data. name;

Var content = data. content;

Var html = "<div class = 'comment'>

Name + "

Content + "</p> </div> ";

((“Tag)).html (html );

})

});

});

2. Post () [Refer to get ()]

 

 

3. $. getScript () method and getJson () method

A. $. getScript (js [, callback]) // dynamically load js files

Aa. dynamically load js files

$. GetScript ("test. js ");

AB. Use callback

$ GetScript ("jquery. color. js", function (){

Alert ("Use callback ");

})

B. getJSON (json [, callback]) // dynamically loads the json file. The usage is similar to getScript ()

 

4. $. ajax () method

 

 

 

Sample Code:

$. Ajax ({

Type: GET,

Url: "test. php ",

DataType: "json ",

Success: function (data ){

Alert ("Callback successful ");

}

});

 

5. Ajax global events in jQuery

Monitor the process of an asynchronous request

 

AjaxStart ()

AjaxStop ()

 

 

(End)