Local method $ ("HTML"). Load () and global Method $.get (), $.post ()

One,. Load ()

The. Load () method can have parameters of three parameters: URL (must, request URL address of HTML file, parameter type is String),
Data (optional, key/value data sent, parameter type Object), callback (optional, successful or failed callback
function, which is the function of the parameter type).
If you want Ajax to load an HTML content asynchronously, we just need a URL for the HTML request.
Html
<input type= "button" value= "Get Data asynchronously"/>
<div id= "box" ></div>
Jquery
$ (' input '). Click (function () {
$ (' #box '). Load (' test.html ');
});
If you want to filter the loaded HTML, simply follow the URL parameter followed by a selector.
URL with Selector
$ (' input '). Click (function () {
$ (' #box '). Load (' test.html. my ');
});
If it is a server file, such as. php. It is not only necessary to load data, but also to submit data to the server, which
We can use the Second optional parameter, data. There are two ways to submit data to the server: Get and post.
Does not pass data, the default Get method
$ (' input '). Click (function () {
$ (' #box '). Load (' Test.php?url=ycku ');
});
Get Way to accept PHP
<?php
if ($_get[' url '] = = ' Ycku ') {
Echo ' Dipper City Web Club website ';
} else {
Echo ' Other sites ';
}
?>
To pass data, the POST method
$ (' input '). Click (function () {
$ (' #box '). Load (' test.php ', {
URL: ' Ycku '
});
});
Post Mode accepted PHP
<?php
if ($_post[' url '] = = ' Ycku ') {
Echo ' Dipper City Web Club website ';
} else {
Echo ' Other sites ';
}
?>
After the Ajax data is loaded, you can execute the callback function callback, which is the third parameter. callback function
You can also pass three optional parameters: ResponseText (Request return), Textstatus (Request status), XMLHttpRequest
(XMLHttpRequest object).
$ (' input '). Click (function () {
$ (' #box '). Load (' test.php ', {
URL: ' Ycku '
}, function (response, status, XHR) {
Alert (' return value: ' + response + ', Status: ' + Status + ',
The status is: ' + xhr.statustext);
});
});
Note: The status gets the value if the data returned successfully is: success, otherwise: error. XMLHttpRequest
Objects are part of the JavaScript category and can call some of the following properties:
Property name Description
ResponseText text to be returned as a response body
Responsexml
If the response principal content type is "Text/xml" or "Application/xml",
The XML DOM document that contains the response data is returned
The HTTP status of the status response
StatusText Description of HTTP status
If the data is returned successfully, then the StatusText property of the Xhr object returns the ' OK ' string. In addition to the ' OK ' status
String, the StatusText property also provides a series of other values, as follows:
HTTP Status Code status string description
OK Server successfully returned page
Bad Request syntax error causes server not to recognize
401 Unauthorized request requires user authentication
404 Not found The specified URL is not found on the server
Internal Server error Server encountered an unexpected error and could not complete the request
503 Serviceunavailable Unable to complete the request due to server overload or maintenance
three. $.get () and $.post ()
The. Load () method is a local method because he needs a JQuery object that contains an element as a prefix. While $.get () and
$.post () is a global method, without specifying an element. For use,. Load () is suitable for asynchronous fetching of static files,
$.get () and $.post () are more appropriate for parameters that need to be passed to the server page.
The $.get () method has four parameters, and the first three parameters are the same as the. Load (), which is a four-parameter type, the service
Format of content returned by the device: Includes XML, HTML, script, JSON, JSONP, and text. The first parameter is a required parameter,
The following three are optional parameters.
Asynchronously returns an HTML type using $.get ()
$ (' input '). Click (function () {
$.get (' test.php ', {
URL: ' Ycku '
}, function (response, status, XHR) {
if (status = = ' Success ') {
$ (' #box '). HTML (response);
}
})//type automatically to HTML
});
Note: The fourth parameter type is the type that specifies the asynchronous return. In general, the type parameter is a smart judgment and does not
We need to be proactive, and if we do, we will force the return in the specified type format.
Using $.get () to return XML asynchronously
$ (' input '). Click (function () {
$.get (' Test.xml ', function (response, status, XHR) {
$ (' #box '). HTML ($ (response). Find (' root '). Find (' URL '). text ());
}); Type is automatically converted to XML
});
Note: If you are loading an XML file, type will be smart to judge. If you forcibly set the HTML type to return, you will
Returns the XML file as normal data without parsing the data in XML format.
Using $.get () to return JSON asynchronously
$.get (' Test.json ', function (response, status, XHR) {
alert (Response[0].url);
});
The use of the $.post () method is basically consistent with the $.get (), and the difference between them is more obscure, basically behind the
Different, the user is not reflected in the use. The specific differences are as follows:
The 1.GET request is submitted through a URL, and the POST request is submitted by the HTTP message entity;
2.GET commit has a size limit (2KB), and the POST mode is unrestricted;
3.GET mode will be cached, there may be security issues, and POST does not have this problem;
4.GET is obtained via $_get[], POST via $_post[].
Using $.post () to return HTML asynchronously
$.post (' test.php ', {
URL: ' Ycku '
}, function (response, status, XHR) {
$ (' #box '). HTML (response);
});
Four. $.getscript () and $.getjson ()
JQuery provides a set of methods for specific asynchronous loading: $.getscript (), which is used to load a specific JS file;
$.getjson (), which is used to load JSON files specifically.
Sometimes we want to be able to load the JS file in a specific situation, instead of loading all the JS files at the beginning,
The $.getscript () method is used in this class.
Click the button and then load the JS file
$ (' input '). Click (function () {
$.getscript (' test.js ');
});
The $.getjson () method is specifically used to load the JSON file, using the same method as before.
$ (' input '). Click (function () {
$.getjson (' Test.json ', function (response, status, XHR) {
alert (Response[0].url);
});
});

Local method $ ("HTML"). Load () and global Method $.get (), $.post ()