Json file is a lightweight data interaction format. GetJSON () is generally used in jquery to read data.
Copy codeThe Code is as follows:
$. GetJSON (url, [data], [callback])
Url: the address of the loaded page.
Data: Optional. data sent to the server. The format is key/value.
Callback: Optional. callback Function executed after successful Loading
1. Create a JSON Format File userinfo. json to save user information. As follows:
Copy codeThe Code is as follows:
[
{
"Name": "Zhang Guoli ",
"Sex": "male ",
"Email": "zhangguoli@123.com"
},
{
"Name": "Zhang tielin ",
"Sex": "male ",
"Email": "zhangtieli@123.com"
},
{
"Name": "Deng Yi ",
"Sex": "female ",
"Email": "zhenjie@123.com"
}
]
2. Create a page 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> getJSON data retrieval </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"; // variable for storing data
$ Jsontip. empty (); // clear the content
$. Each (data, function (infoIndex, info ){
StrHtml + = "name:" + info ["name"] + "<br> ";
StrHtml + = "Gender:" + info ["sex"] + "<br> ";
StrHtml + = "email:" + info ["email"] + "<br> ";
StrHtml + = "})
Jsonjsontip.html (strHtml); // display processed data
})
})
})
</Script>
</Head>
<Body>
<Div id = "divframe">
<Div class = "loadTitle">
<Input type = "button" value = "Get Data" id = "btn"/>
</Div>
<Div id = "jsonTip">
</Div>
</Div>
</Body>
</Html>