Ajax Basics Tutorial in jquery (1/4)

Load () method

Load (URL [, data] [, callback]) loads the remote HTML file code and inserts it into the DOM.

Parameter name type description

URL string requests the URL address of an HTML page

Data object sent to the server's Key/value

Callback function requests complete callback data, whether the request succeeds or fails

This method is passed by default using Get method, and is automatically converted to post if the [data] parameter is passed in. In JQuery 1.2, you can specify a selector to filter the loaded HTML document, and only the filtered HTML code will be inserted into the DOM. Syntax is like "URL #some > selector".

This method makes it easy to dynamically load some HTML files, such as forms.

Sample code:

code is as follows

copy code

$ (function ( { $ ("#reText"). Load ("test.html"); }) //////////   2 ///////// $ (". Ajax.load"). Load ("2008/03/30/1130270.html. ClassName ", Function (ResponseText, textstatus, XMLHttpRequest) { this;//here This refers to the current DOM object, that is $ (". Ajax.load ") [0] //filter load required content. After the URL, a space plus selector such as: Load ("test.html #idname") //alert (responsetext);/request returned //alert (textstatus); Request Status: Success,error //alert (XMLHttpRequest);//xmlhttprequest object });

Note: Do not know why the URL write absolute path under FF will be wrong, know the trouble to tell. The following get () and post () examples use an absolute path, so you will go wrong under FF and you will not see the results returned. The Get () and post () examples are called across domains, and they are found to be not able to get results, so the run button is removed.

$.get (URL [, data] [, callback] [, type]) uses the Get method to make an asynchronous request

Parameter name type description

URL string sends the URL address of the request

The Key/value data sent by data object to the server is appended to the request URL as a querystring

callback function load succeeds (when the return state of the response is success) The callback functions automatically pass the request result and state to the method

Type string The format of the content returned by the server, including XML, HTML, script, JSON, text, and _default

The code is as follows	Copy Code
$.get ("./ajax.php", {Action: "Get", Name: "Lulu"}, function (data, textstatus) { The returned data can be xmldoc, jsonobj, HTML, text, etc. alert (data); Alert (Textstatus),//Request status: Success,error, and so on. Of course, the error is not captured here, because the error will not run the callback function//alert (this); });

XML file PHP file

The code is as follows	Copy Code
<?php Header ("Content-type:text/xml; Charset=utf-8 "); echo "<?xml version= ' 1.0 ' encoding= ' utf-8 '?> '". "<comments>". "<comment username= ' {$_request[' username ']} ' > '. "<content>{$_request[' content ']}</content>". "</comment>". "</comments>"; ?>

HTML file (part of the callback function)

The code is as follows	Copy Code
function (data, textstatus) { var username = $ (data). Find ("comment"). attr ("username"); var content = $ (data). Find ("comment content"). text (); var txthtml = "<div class= ' comment ' > $ ("#resText"). HTML (txthtml); Add the returned data to the page });

Home 1 2 3 4 last page