jquery Tutorial-the Load () method of Ajax

Last Update:2017-04-27 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

jquery Tutorial-the Load () method of AjaxTags: jqueryajaxxmlhttprequesthtmlcallback2009-10-05 14:54 3700 people read Comments (3) favorite reports Classification:jQuery (7)

jquery encapsulates Ajax operations, where the $.ajax () method is the lowest-level method in jquery, and the 2nd layer is the laod (), $.get (), and $.post () methods, and the 3rd layer is the $.getscript () and $.getjson () methods.

The load () method is the simplest and most commonly used Ajax method in jquery to load remote HTML code into the DOM. Its syntax structure is:

Load (URL [, data][, Callback])

The load () method parameter is explained in the following table:

Parameter name	Type	Description
Url	String	Request the URL address of an HTML page
Data (optional)	Object	Key/value data sent to the server
Callback (optional)	Function	callback function when the request completes, whether the request succeeds or fails

1. Loading HTML documents

Start by creating an HTML file named Test.html, which prepares you for background Ajax loading. The code is as follows:

[XHTML]View PlainCopy

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv= "content-type" content= "text/html; Charset=utf-8 ">
<title>insert title here</title>
</head>
<body>
<div class="comment">
Comments already available:
</div>
<div class="comment">
<h6> Zhang San:</h6>
<p class="para"> sofa. </P>
</div>
<div class="comment">
<h6> John Doe:</h6>
<p class="Para"> bench. </P>
</div>
<div class="comment">
<h6> Harry:</h6>
<p class="para"> floor. </P>
</div>
</body>
</html>

Then create a new blank page, add two elements above the:<button> button to trigger an AJAX event, the element with the id "ResText" to display the appended HTML content. The next step is to write the jquery code. When the DOM element is loaded, the Laod () method is called by clicking the button with the id "send", and the contents of the test.html are loaded into the element with the id "ResText". Then the code is as follows:

[XHTML]View PlainCopy

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv= "content-type" content= "text/html; Charset=utf-8 ">
<title>insert title here</title>
<Mce:scriptType= "text/<a href= "http://lib.csdn.net/base/javascript" < span class= "attribute" >class= ' Replace_word ' title=< Span class= "Attribute-value" > "JavaScript Knowledge Base" target= ' _blank ' style= ' color: #df3434; font-weight: bold; ' >javascript</a> " < span class= "attribute" >src= "/jquery-1.3.2.js" mce_ Src= "jquery-1.3.2.js" ></ mce:script>
</head>
<body>
<input type="button" id="send" value="ajax get" />
<div id="ResText"></div>
<mce:script type="Text/javascript"><!--
$ (document). Ready (function () {
$ ("#send"). Click (function () {
$ ("#resText"). Load ("test.html");
});
});
--></mce:script>
</body>
</html>

When the button is clicked, the interface appears as follows:

Obviously, the load () method has done a very tedious job. The developer only needs to use the jquery selector to specify the target location for the HTML fragment, and then pass the URL of the file to be loaded as an argument to the load () method.

2. Filter the loaded HTML document

The last example is to load the contents of the test.html page into an element with the id "ResText". If you only need to load certain elements within the test.html page, you can use the URL parameter of the load () method to achieve the purpose. By specifying a selector for the URL parameter, it is easy to filter out the required content from the loaded HTML document.

The URL parameter of the load () method has the syntax structure: "URL selector". Notice that there is a space between the URL and the selector.

For example, you only need to load the content of class "Para" in the test.html page, which can be done using the following code:

$ ("#resText"). Load ("test.html. para");

The operating effect is as follows:

3. Delivery method

The load () method is passed as specified according to the parameter data. If there is no parameter passing, it is passed by get, and vice versa, it is automatically converted to post.

No parameter passing, it is get mode
$ ("#resText"). Load ("test.php", function () {
//......
});
With parameter passing, it is the Post method
$ ("#resText"). Load ("test.php", {name: "xht555", Age: "},function" () {
//......
});

4. Callback Parameters

For operations that must be completed before loading, the load () method provides a callback function (callback) that has three parameters representing the content returned by the request, the request status, and the XMLHttpRequest object, as the jquery code reads:

$ ("#resText"). Load ("test.html", function (responsetext,textstatus,xmlhttprequest) {
ResponseText: Request What is returned
Textstatus: Request Status: Success, error, notmodified, timeout these 4 kinds
Xmlhttprequest:xmlhttprequest Object
});

jquery Tutorial-the Load () method of Ajax

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jquery Tutorial-the Load () method of Ajax

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support