Home > Article > Web Front-end > 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.
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:
JSON
is <a href="http://www.php.cn/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');// })We can use the global function
getScript to load the file, and also bind Target the click event of the button:
$('button').click(function() { $.getScript('test.js'); });After clicking the button, load the
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>Loading
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); }); });View
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!