A JSON file is a lightweight data interchange format. Typically read in jquery using the Getjson () method.
Copy Code code as follows:
$.getjson (Url,[data],[callback])
URL: Loaded page address
Data: Optional, sent to the server, the format is Key/value
Callback: Optional, callback function executed after successful loading
1. First create a JSON-formatted file Userinfo.json save user information. As follows:
Copy Code code as follows:
[
{
"Name": "Zhang State",
"Sex": "Male",
"Email": "zhangguoli@123.com"
},
{
"Name": "Zhang Tielin",
"Sex": "Male",
"Email": "zhangtieli@123.com"
},
{
"Name": "Deng Jie takes",
"Sex": "Female",
"Email": "zhenjie@123.com"
}
]
2. Then build a page to get the user information data in the JSON file, and show
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>getjson Get Data </title>
<script type= "Text/javascript" src= "Js/jquery-1.8.2.min.js" ></script>
<style type= "Text/css" >
#divframe {border:1px solid #999; width:500px; margin:0 Auto;}
. loadtitle{background: #CCC; height:30px;}
</style>
<script type= "Text/javascript" >
$ (function () {
$ ("#btn"). Click (function () {
$.getjson ("Js/userinfo.json", function (data) {
var $jsontip = $ ("#jsonTip");
var strhtml = "123";//the variable that stores the data
$jsontip. Empty ();//empty content
$.each (Data,function (infoindex,info) {
strHTML + + "Name:" +info["name"]+ "<br>";
strHTML + + "Sex:" +info["Sex"]+ "<br>";
strHTML + + "e-mail:" +info["email"]+ "<br>";
strHTML = "})
$jsontip. HTML (strhtml);//Display processed data
})
})
})
</script>
<body>
<div id= "Divframe" >
<div class= "Loadtitle" >
<input type= "button" value= "Fetch data" id= "BTN"/>
</div>
<div id= "Jsontip" >
</div>
</div>
</body>
