<body>
<a href="javascript:addContent()"> show </a>
<Table border = ". 1" ID = "Show"> </ Table>
<Script type = "text / JavaScript">
/ **
* data display
* /
function addContent () {
$ ( "# show") HTML ( "");. // clear content
getData (setContentText); // get the data
}
/ **
* set the page data
* data data
* /
function setContentText (data) {
var = data tableContent; // data content
// text to display data table
$ ( "# show").append(tableContent);
}
/**
* Get Data
* the callback callback function
* /
function the getData (the callback) {
var Content = "<TR> <TD> ID </ TD> <TD> name </ TD> </ TR>";
$ .ajax ({
URL : "data.json", // path
data: {}, // parameter
type: "get", // request method
// async: false, // synchronous (the default is true, asynchronous)
dataType: "JSON", // data type
Success: function (DATAS) {
var = data datas.rows; // data set
// all objects of the outer loop, the inner loop for each object property
for (var i = 0; i <data. length; i ++) {
= + Content "<TR>";
var Data Item = [I];
Content + = "<TD>" + item.id + "</ TD>";
Content + = "<TD>" + + item.name, for "< / TD> ";
Content = +" </ TR> ";
}
the callback (Content); // get the data processed by the callback
},
// exception
error: function (the XMLHttpRequest, textStatus, errorThrown) {
// state code
the console.log (XMLHttpRequest.status);
// state
console.log (XMLHttpRequest.the readyState);
// error message
the console.log (textStatus);
},
// data before loading
beforeSend: function () {},
// After the completion of the data loading
Complete: function () {}
});
}
</ Script>
</ body>
Renderings:
data.json:
{
"total":10,
"rows":[
{"id":"FI-SW-01","name":"Koi"},
{"id":"K9-DL-01","name":"Dalmation"},
{"id":"RP-SN-01","name":"Rattlesnake"},
{"id":"RP-SN-01","name":"Rattlesnake"},
{"id":"RP-LI-02","name":"Iguana"},
{"id":"FL-DSH-01","name":"Manx"},
{"id":"FL-DSH-01","name":"Manx"},
{"id":"FL-DLH-02","name":"Persian"},
{"id":"FL-DLH-02","name":"Persian"},
{"id":"AV-CB-01","name":"Amazon Parrot"}
]
}