jQuery Study Notes - Ajax Operation (1) - Data Loading_jquery

Load HTML

We usually use the method of loading HTML to load HTML fragments and insert them into the specified position. Assume that the current page is:

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

The content of the test.html file in the same directory is:

<span>test</span>

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

 $('button').click(function() {
  $('div').load('test.html');
 });

After clicking the button:

Loading JSON

JSON is Javascript Object Notation, literally translated as Javascript Object Notation, so it can easily represent and transmit data. It stipulates that keys and values ​​must be enclosed in double quotes, and functions are illegal JSON values.

{
  "name": "stephenlee", 
  "sex": "male"
}

Save the above JSON data in the test.json file. We can use the getJSON method to load JSON data and also bind it to the click event of the button:

 $('button').click(function() {
  $.getJSON('test.json');
 });

Since the getJSON method is defined as a global object of jQuery, you need to use $ to call this method. Here $ refers to the global jQuery object, not the individual jQuery objects that $() refers to. Therefore we also call the getJSON function a global function.
But we will find that the above code only obtains JSON data, but does not see any effect. Here we can use the second parameter of the getJSON method as the 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, let’s take a look at the output in the console:

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

Loading JS

Sometimes we don’t want to load all JS files when the page is first loaded, but dynamically load them based on demand. Suppose there is a JS file in the current directory with a simple alert:

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

We can use the global function getScript to load the file and bind it to the click event of the button:

 $('button').click(function() {
  $.getScript('test.js');
 });

After clicking the button, the test.js file is loaded and the alert is successfully triggered.

Load XML

The loading operation of XML is similar to JSON, because the role of XML documents is also related to data storage. Create a text.xml file in the same directory with the content:

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

You can directly use the get method to load XML documents. Why it looks like a default method can be seen 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 the console and the result is:

It should be noted here that if the format in the XML document is incorrect, although no error will be reported, the callback function will not be executed.