Home > Developer > JavaScript
Use js in html to read the data returned by a dynamic website from the server for display.
1、js.html page
JavaScript files that execute jquery need to be introduced
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<Meta name = "Generator" 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 (){
$ (Document). 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 of the json type.
$. GetJSON ('info. json', function (data ){
Var html = '';
$. Each (data, function (I, item ){
Html + = '<tr> <td>' + item ['name'] + '</td>' +
'<Td>' + item ['sex'] + '</td>' +
'<Td>' + item. address + '</td>' +
'<Td>' + item ['home'] + '</td> </tr> ';
});
$ ('# Title'). after (html );
// After method: insert content after each matching element.
});
});
});
// Note: It can be item. address or item ['address']
// Firefox reports a "syntax error [" in the json file. data can be loaded only.
// 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 codeThe Code is as follows:
[
{
"Name": "zhangsan ",
"Sex": "man ",
"Address": "hangzhou ",
"Home": "http://www.zhangsan.com"
},
{
"Name": "lisi ",
"Sex": "wumen ",
"Address": "beijing ",
"Home": "http://www.lisi.coms"
}
]
Application scenarios:
The specific records read from the database are regularly placed on static pages for display. To reduce the pressure on database access, the specific records are retrieved and stored in json, the page access link does not need to request the database in real time.
So far, you can load the content in json to html static.
If the Chinese character is not displayed, it is indeed an encoding problem. The default json character saved must be a notepad, And the suffix is changed to json. The default encoding of the notepad character is ANSI,
Solution: Open the. json file-Save As see the following encoding format, select UTF-8 on it.
There is another error-prone area:
The request for a json file reports a 405 error, indicating that the path is correct but still reports an error.
Solution: modify the request method to get request:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
