jQuery Ajax load() method_jquery-JS Tutorial-php.cn

jQuery Ajax load() method_jquery

WBOY

Release： 2016-05-16 18:44:47

Original

1257 people have browsed it

load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中。它的语法结构为：

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

　　load()方法参数解释见下表：

参数名称	类　型	说　　明
url	String	请求HTML页面的URL地址
data（可选）	Object	发送至服务器的key/value数据
callback（可选）	Function	请求完成时的回调函数，无论请求成功或失败

1. Load HTML document
First create an HTML file named test.html to prepare for background Ajax loading. The code is as follows:

Copy code The code is as follows:

Insert title here

There are comments:

Zhang San:

Sofa.

para">Bench.

Wang Wu:

Floor.

Then create a new blank page and add two elements on it : The

Copy code The code is as follows:

Insert title here

< ;/html>

When the button is clicked, the following interface appears:

Obviously, the load() method has completed the originally tedious work. Developers only need to specify the target location for the HTML fragment using jQuery selectors and then pass the URL of the file to be loaded as a parameter to the load() method.
2. Filter the loaded HTML documents
The previous example is to load the contents of the test.html page into the element with the id "resText". If you only need to load certain elements within the test.html page, you can use the URL parameters of the load() method to achieve your goal. By specifying selectors for URL parameters, you can easily filter out the required content from the loaded HTML document. The syntax structure of the URL parameter of the load() method is: "url selector". Note that there is a space between the URL and the selector.
For example, you only need to load the content with class "para" in the test.html page. You can use the following code to complete:
$("#resText").load("test.html .para");
The running effect is as follows:

3. Transfer method
The transfer method of the load() method is automatically specified according to the parameter data. If no parameters are passed, it will be passed in GET mode; otherwise, it will be automatically converted to POST mode.

Copy code The code is as follows:

 
//If no parameters are passed, it is GET method
$("#resText").load("test.php",function(){ 
//...... 
}); 
//If there are parameters to pass, it is POST method
$("#resText").load("test.php",{name:"xht555",age:"24" }, function(){ 
//... 
}); 

4. Callback parameters
For operations that must be completed before loading can continue, The load() method provides a callback function (callback), which has three parameters, representing the content returned by the request, the request status and the XMLHttpRequest object. The jQuery code is as follows:

Copy the code The code is as follows:

 
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){ 
//responseText: Content returned by the request
//textStatus: Request status: 4 types: success, error, notmodified, timeout
//XMLHttpRequest: XMLHttpRequest object
}); 

Note: In the load() method, no matter whether the Ajax request is successful or not, the callback function (callback) will be triggered as long as the request is completed.