jquery Learning notes Ajax How-to article (i)-Data loading _jquery

Load HTML

We typically use HTML-loaded methods to load HTML fragments and insert them in the specified location, assuming the current page is:

<div></div>
<button>load</button>

The contents of the test.html file in the same directory are:

<span>test</span>

We can use the Load method to load the HTML and bind it to the button's Click event:

 $ (' button '). Click (function () {
  $ (' div '). Load (' test.html ');
 });

After clicking the button:

Load JSON

JSON, the JavaScript Object notation, is a literal representation of JavaScript objects, so it is easy to represent and transmit data, which stipulates that the keys and values must be enclosed in double quotes and that the function is an illegal JSON value.

{
  ' name ': ' Stephenlee ', 
  ' sex ': ' Male '
}

Save the JSON data above in the Test.json file. We can load JSON data using the Getjson method and bind it to the button's Click event as well:

 $ (' button '). Click (function () {
  $.getjson (' Test.json ');
 });

Because the Getjson method is defined as a global object of jQuery, you need to use $ to invoke this method. The $ here refers to the global jquery object, not the individual jquery object that the $ () refers to. Therefore we also call the Getjson function as a global function.
But we'll find that the above code just gets the JSON data, but we don't see any effect, and here we can use the second parameter of the Getjson method as a callback function to test the effect:

 $ (' button '). Click (function () {
  $.getjson (' Test.json ', function (data) {
   console.log (data);
   $.each (data, function (index, content) {
    console.log (content);
   })
  });
 

After clicking the button, we look at the output in the console:

The first parameter of each function here can receive an array or an object, and the second parameter is a value callback function that takes the current index and value of the array or object in each loop as a parameter.

Load JS

Sometimes we do not want to load the page at the first loading of all JS files, but dynamically according to the requirements to load, assuming the current directory has a JS file, content for a simple alert:

$ (function () {
 alert (' Test ');//
})

We can use the global function getscript to load the file, which is also bound to the button's Click event:

 $ (' button '). Click (function () {
  $.getscript (' test.js ');
 });

When the button is clicked, load the Test.js file and trigger alert successfully.

Loading XML

Load operations on XML are similar to JSON, because XML documents are also associated with data storage, creating text.xml files in the same directory, with the following contents:

<person>
<name>stephenlee</name>
<sex>male</sex>
</person>

Loading an XML document directly uses the Get method and why it looks like a default method, which can be discerned from the full name of AJAX-asynchronous JavaScript and XML.
Also bind it to the button click event:

 $ (' button '). Click (function () {
  $.get (' Test.xml ', function (data) {
    console.log (data);})
 ;

View Console results are:

It should be noted here that if the XML document is malformed, the callback function cannot be executed, although there is no error.