Use JS to read the data returned from the server with JS in HTML to display
1. js.html page
You need to introduce jQuery JS files
Copy code code as follows:
<! Doctype html public "-// W3C // dtd html 4.0 transitional // en">>
<Html>
<Head>
<Title> New Document </Title>
<Meta name = "general" content = "editplus">
<Meta name = "author" content = "">
<Meta name = "keywords" content = "">
<Meta name = "description" content = "">
<script src = "jquery-1.8.2.min.js"> </script>
<script>
$ (function () {
// $ ("#loaddata"). Click (function () {
$ (docume) .Ready (function () {{) {
// Use the getjson method to read JSON data,
// Note: Info.json can be different types of files, as long as the data is JSON type, it can
$ .getjson ('info.json', function (data) {
var html = '';
$ .Each (data, function (i, item) {
html+= '<ted>'+item ['name']+'</td>'+
'<td>'+item ['sex']+'</td>'+
'<td>'+item.address+'</td>'+
'<td>'+item ['Home']+'</td> </tr>';
});
$ ('#title'). After (html);
// After method: Insert the content after each matching element.
});
});
});
// Note: It can be item.address, or it can be ['address']
// Firefox reports "grammar errors [" in json file [", can load data alone
// ie chrome cannot load data
</script>
</Head>
<input type = "Button" value = "Loading Data" ID = "Loaddata" />
<body>
<Table ID = "Infotable">
<tr ID = "Title"> <TH> Name </th> <TH> Gender </th> <TH> Address </th> <th> Homepage </th> </tr>
</table>
</Body>
</Html>
Info.json file
Copy code code as follows:
[
{{
"name": "zhangsan",
"Sex": "man",
"address": "haangzhou",
"Home": "http://www.zhangsan.com"
},
{{
"name": "lisi",
"Sex": "WUMEN",
"address": "Beijing",
"Home": "http://www.lisi.coms" "
}
]
Application scenario:
Put the specific records read from the database on the static page to display on a regular basis. In order to reduce the pressure on database access, the number of specific records is stored in JSON. The page access link does not need to request the database in real time.
At this point, the content of JSON can be loaded to HTML static.
It is indeed a coding problem that cannot be displayed. The default JSON is definitely a notepad, and then changing the suffix is JSON.
Solution: Open the .json file file-Save it to see the following encoding format. Select UTF-8.
There is also a place that is easy to make mistakes here:
Request the JSON file to report 405 errors, obviously the path is right, but still reports an error.
Solution: Modify the request method to get requests: