Article for you to provide free two jquery read the page special effects on file Two instance code, these code is very practical OH
JSON file:
[
{
"Name": "Xujun",
"Sex": "Male",
"Home": "Nanjing"
},
{
"Name": "Jack",
"Sex": "Male",
"Home": "Beijing"
}
]HTML file:
<!doctype HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW111CN.NET/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>insert title here</title>
<script src= ". /jquery.js "></script>
<script>
$ (document). Ready (function () {
$.getjson (' Jsondata.json?id ', function (data) {
Iterate through each entry in the JSON$.each (Data,function (entryindex,entry) {
var html= ' <tr> ';
html+= ' <td> ' +entry[' name ']+ ' </td> ';
html+= ' <td> ' +entry[' sex ']+ ' </td> ';
html+= ' <td> ' +entry[' home ']+ ' </td> ';
html+= ' </tr> ';
$ (' #title '). After (HTML);});
});
});
</script>
<body>
<table>
<tr id= "title" >
<th> name </th>
<th> Sex </th>
<th> Home Address </th>
</tr>
</table>
</body>
Example Two
<!doctype HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 ">
<title>json document</title>
<script type= "text/web Effects" src= "Lib/jquery/jquery-1.3.2.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#button"). Click (function () {
$.getjson (B.json, function (data) {//Getjson method gets the code for the JSON file, where the parameter data of the callback function is the JSON code
$ ("#json"). empty (); Empty the contents of the DIV tag with the "JSON" ID
$.each (Data,function (entryindex,entry) {//each method traverses the object in the JSON file, Entryindex is the current index, and entry is the current item
var html= "<div class= entry >";
HTML + + "HTML + + "<div class= part >" +entry[part]+ "</div>";
HTML + + "<div class= definition >" +entry[definition];
if (entry[quote]) {
html+= "<div class= quote >";
$.each (entry[quote],function (quoteindex,line) {
html+= "<p>" +line+ "</p>";
});
html+= "</div>";
}
html+= "</div>";
HTML + "</div>";
$ ("#json"). Append (HTML);
});
});
});
});
</script>
<body>
<div id= "button" ><b>get json document</b></div>
<div id= "JSON" ></div>
</body>
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
