jquery asynchronous fetch JSON data method Rollup _jquery

jquery has 2 ways to get JSON data asynchronously, one is the $.getjson method and the other is the $.ajax method. This experience uses these 2 ways to get JSON data asynchronously and then append to the page.

To create a Data.json file under the root directory:

Copy Code code as follows:

{
"One": "Hello",
"Two": "World"
}

Get JSON data by $.getjson method

Copy Code code as follows:

<script src= "Scripts/jquery-2.1.1.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$.getjson (' Data.json ', function (data) {
var items = [];
$.each (data, function (key, Val) {
Items.push (' <li id= ' + key + ' "> ' + val + ' </li> ');
});
$ (' <ul/> ', {
' Class ': ' List ',
Html:items.join (")"
}). Appendto (' body ');
});
});
</script>

Get JSON data by $.ajax method

Copy Code code as follows:

<script src= "Scripts/jquery-2.1.1.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$.ajax ({
URL: ' Data.json ',
DataType: ' JSON ',
Success:function (data) {
var items = [];
$.each (data, function (key, Val) {
Items.push (' <li id= ' + key + ' "> ' + val + ' </li> ');
});
$ (' <ul/> ', {
' Class ': ' List ',
Html:items.join (")"
}). Appendto (' body ');
},
StatusCode: {
404:function () {
Alert ("No relevant documents found");
}
}
});
});
</script>

Summary: The same effect can be achieved using both the $.getjson method and the $.ajax method, but the $.ajax method is recommended if you want to have more detailed control over the process of obtaining asynchronously.