Parsing jQuery Ajax Operations (1) Data Loading

Ajax Generally speaking, data can be loaded from the server or client without refreshing the page. Of course, the formats of these data are diverse.

Load HTML

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

<p></p>
<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, bind it to the button's click event:

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

After clicking the button:

Loading JSON

JSON is <a href="//m.sbmmt.com/wiki/48.html" target="_blank">Javascript</a> Object Notation, which is literally translated as Javascript object notation, so It can easily represent and transmit data. It stipulates that both keys and values ​​must be enclosed in double quotes, and the function is an illegal JSON value.

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

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

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

Since the getJSON method is It is defined as a global object of jquery, so you need to use $ to call this method. The $ here refers to the global jQuery object, not the individual jQuery objects referred to by $(). Therefore, we also call the getJSON function 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 console:

each The first parameter of the function 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. .

JS files when the page is first loaded, but dynamically load them based on demand. Assume that in the current directory There is a JS file with a simple alert:

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

getScript to load the file, and also bind Target the click event of the button:

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

test.js file and successfully trigger alert.

XML is similar to JSON, because the XML document also functions as a data storage Related, create a text.xml file in the same directory with the content:

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

XML The document can be directly used using the get method, why It looks like a default method, which can be seen from the full name of AJAX – Asynchronous JavaScript And XML. Similarly bind it to the button click event:

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

console The result is:

XML document is incorrect, although no error will be reported, the callback function will not be executed.

The above is the detailed content of Parsing jQuery Ajax Operations (1) Data Loading. For more information, please follow other related articles on the PHP Chinese website!