Turn http://www.jb51.net/article/36678.htm
1.userinfo.html
<! 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 src= "Http://libs.useso.com/js/jquery/1.11.1/jquery.js" ></script>
<style type= "Text/css" >
#divframe {border:1px solid #999; width:500px; margin:0 Auto;}
. loadtitle{background: #CCC; height:30px;}
</style>
<body>
<div id= "Divframe" >
<div class= "Loadtitle" >
<input type= "button" value= "Get Data" id= "BTN"/>
</div>
<div id= "Jsontip" >
</div>
</div>
</body>
<script type= "Text/javascript" >
$ (function () {
$ ("#btn"). Click (function () {
$.getjson ("Data//json//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>
2.data//json//userinfo.json
[
{
"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]"
}
]
jquery reads JSON files