Beginner Ajax (ii)

$.get () and $.post ()

The. Load () method is a local method because it requires a JQuery object that contains an element as a prefix. While $.get () and $.post () are global methods, you do not need to specify an element. For use,. Load () is suitable for asynchronous fetching of static files, and$.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, like. Load (), have one more of the four parameter type, the content format that the server returns: including XML, HTML, script, JSON, JSONP, and text. The first parameter is a required parameter, and the next three is an optional parameter.

The HTML code is as follows:

<!DOCTYPE HTML><HTML><Head>    <MetaCharSet= "UTF-8">    <title>Ajax</title>    <Scripttype= "Text/javascript"src= "Jquery-1.12.3.js"></Script>    <Scripttype= "Text/javascript"src= "Demo.js"></Script></Head><Body>    <inputtype= "button"value= "Load data asynchronously" />    <DivID= "box">            </Div></Body></HTML>

The Get mode accepts PHP:

<? PHP     if ($_get[' url '] = = ' Ycku ')        {echo "Dipper City Web Club"    ; Else {        echo "Wood has! ";    }? >

The jquery code is as follows:

① by directly following the URL question mark immediately after the argument

$ ("Input"). Click (function() {    $.get ("test.php?url=yckufunction (response, status, XHR) {        $ ("#box"). HTML (response);    } );

② the second parameter data, the string form of the key value of the argument, and then automatically converted to a question mark immediately after the argument

$ ("Input"). Click (function() {    $.get ("test.php","Url=ycku"function( Response, status, XHR) {        $ ("#box"). HTML (response);    } );

③ the second parameter data, the object form of the key value of the argument, and then automatically converted to a question mark immediately after the argument

$ ("Input"). Click (function() {    $.get ("test.php",{url: "Ycku"}function  (response, status, XHR) {        $ ("#box"). HTML (response);    } );

Post-mode accepted PHP:

<? PHP    if ($_post[' url '] = = ' Ycku ')        {echo "Dipper City Web Club"    ; Else {        echo "Wood has! ";    }    ? >

jquery Code:

①post Submit cannot use question mark to pass argument

$ ("Input"). Click (function() {    $.post(response, status, XHR) {        $ ("#box"). HTML (response);    } );

②post commits can be automatically converted to an HTTP message entity by using a string-type key-value-to-pass parameter

$ ("Input"). Click (function() {    $.  Post("test.php","Url=ycku"function(response, status, XHR) {        $ ("#box"  ). HTML (response);    } );

③post commits can use object key value pairs

$ ("Input"). Click (function() {    $.  Post("test.php",{url: "Ycku"}function(response, status, XHR) {        $ ( "#box"). HTML (response);    }) ;

Asynchronously returns an HTML type using $.post ():

$ ("Input"). Click (function() {    $.post (response, status, XHR) {        $ ( "#box"). HTML (response);     // PHP files return plain text, default is HTML or text});

Note: The fourth parameter type is the type that specifies the asynchronous return. In general, the type parameter is intelligent judgment, do not need us to set the initiative, if the active setting, it will be forced to return in the specified type format.

$ ("Input"). Click (function() {    $.post (response, status, XHR) {        $ ( "#box"). HTML (response);    },// is itself plain text, and if it is forced to return in XML or JSON data format, then data cannot be obtained });

The server has test.xml files:

<? XML version= "1.0" ?> < Root >    < URL >www.ycku.com</url></root> 

jquery Code:

 $ ("input"). Click (function   () {$.post (  "test.xml ", function    (response, status, XHR) { // $ ("#box"). HTML (response); Error  alert (response); // [object XMLDocument] }, "xml  " 

$ ("Input"). Click (function() {    $.post ("test.xmlfunction(response, Status, XHR) {        //$ ("#box"). HTML (response);         alert (response);    },"html");  // The default type is already XML, and if it is already XML by default, it is forced to HTML, and the XML tag is returned });

Asynchronously returns XML using $.post ():

$ ("Input"). Click (function() {    $.post(response, status, XHR) {         //alert ($ (response). Find ("root"). Find ("url"). text ());        $ ("#box"). HTML ($ (response). Find ("root"). Find ("url").text ());     // type is automatically converted to XML});

Note: If you load an XML file, type will intelligently determine that if you force the HTML type to return, the XML file will be returned as normal data instead of parsing the data in XML format.

The server has Test.json files:

[    {        "url": "Www.ycku.com"    }]

Asynchronously returns the JSON using $.post ():

$ ("Input"). Click (function() {    $.post ("test.jsonfunction(response, Status, XHR) {        alert (response[0].url);    " json");});

The use of $.post () method and $.get () are basically consistent, the difference between them is more obscure, the basic is the difference behind, in the user's use can not be reflected. The specific differences are as follows:

1. The GET request is submitted through a URL, and the POST request is submitted by the HTTP message entity
2. The get commit has a size limit (2KB), and the post is unrestricted
3. The get mode will be cached, there may be security issues, and post does not have this problem
4. Get via $_get[] , POST via $_post[] (for PHP only)

$.getscript () and $.getjson ()

jquery provides a set of methods for a specific asynchronous load:$.getscript (), which loads a specific JS file, and$.getjson (), which is used to load the JSON file 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, then use the $.getscript () method.

Ajax.html:

<!DOCTYPE HTML><HTML><Head>    <MetaCharSet= "UTF-8">    <title>Ajax</title>    <Scripttype= "Text/javascript"src= "Jquery-1.12.3.js"></Script>    <Scripttype= "Text/javascript"src= "Demo.js"></Script>    <!--<script type= "Text/javascript" src= "Test.js" ></script> -</Head><Body>    <inputtype= "button"value= "Load data asynchronously" />    <DivID= "box">            </Div></Body></HTML>

Test.js:

Alert ("I am being called to be loaded");

jquery Code:

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.

Test.json:

[    {        "url": "Www.ycku.com"    }]

jquery Code:

$ ("Input"). Click (function() {    $.getjson(response, status, XHR) {        Alert (response[0].url);     });

$ ("Input"). Click (function() {    $.getjson(response, status, XHR) {         // [Object Object]    }, "html"); });

Beginner Ajax (ii)