JSON files are a lightweight form of data interaction. Generally read in jquery using the Getjson () method, the specific sample code is as follows, interested friends can refer to the next ha, hoping to help your JSON file is a lightweight data interchange format. Typically read in jquery using the Getjson () method.
Copy CodeThe code is 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 loading succeeded
1. First build a JSON-formatted file Userinfo.json Save the user information. As follows:
Copy CodeThe code is as follows:
[
{
"Name": "Zhang National",
"Sex": "Male",
"Email": "[email protected]"
},
{
"Name": "Zhang Tielin",
"Sex": "Male",
"Email": "[email protected]"
},
{
"Name": "Deng Jie takes",
"Sex": "Female",
"Email": "[email protected]"
}
]
2. Next, a page is used to obtain the user information data in the JSON file and display
Copy CodeThe code is 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";//variables that store data
$jsontip. Empty ();//Clear Contents
$.each (Data,function (infoindex,info) {
strHTML + = "Name:" +info["name"]+ "<br>";
strHTML + = "Gender:" +info["Sex"]+ "<br>";
strHTML + = "e-mail:" +info["email"]+ "<br>";
strHTML + = "})
$jsontip. HTML (strhtml);//display of processed data
})
})
})
</script>
<body>
<div id= "Divframe" >
<div class= "Loadtitle" >
<input type= "button" value= "Get Data" id= "BTN"/>
</div>
<div id= "Jsontip" >
</div>
</div>
</body>
Sample code for reading JSON files in jquery
