jQuery中讀取json文件

json文件是一種輕量級的數據交互格式。一般在jquery中使用getJSON()方法讀取。

$.getJSON(url,[data],[callback])

url:加載的頁面地址

data: 可選項,發送到服務器的數據,格式是key/value

callback:可選項,加載成功後執行的回調函數

1.      首先建一個JSON格式的文件userinfo.json 保存用戶信息。如下:

[html]


    "name":"張國立", 
    "sex":"男", 
    "email":"zhangguoli@123.com" 
}, 

    "name":"張鐵林", 
    "sex":"男", 
    "email":"zhangtieli@123.com" 
}, 

    "name":"鄧婕", 
    "sex":"女", 
    "email":"zhenjie@123.com" 

[
{
 "name":"張國立",
 "sex":"男",
 "email":"zhangguoli@123.com"
},
{
 "name":"張鐵林",
 "sex":"男",
 "email":"zhangtieli@123.com"
},
{
 "name":"鄧婕",
 "sex":"女",
 "email":"zhenjie@123.com"
}
]

 

2.      其次建一個頁面用於獲取JSON文件裡的用戶信息數據,並顯示

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="https://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>getJSON獲取數據</title> 
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 
<style type="text/css"> 
 #pframe{ 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";//存儲數據的變量 
            $jsontip.empty();//清空內容 
            $.each(data,function(infoIndex,info){ 
                  strHtml += "姓名:"+info["name"]+"<br>"; 
                  strHtml += "性別:"+info["sex"]+"<br>"; 
                  strHtml += "郵箱:"+info["email"]+"<br>"; 
                  strHtml += "<hr>" 
                }) 
            $jsontip.html(strHtml);//顯示處理後的數據    
            }) 
        }) 
     
    }) 
</script> 
</head> 
 
<body> 
<p id="pframe"> 
  <p class="loadTitle"> 
    <input type="button" value="獲取數據" id="btn"/> 
  </p> 
  <p id="jsonTip"> 
  </p> 
</p> 
</body> 
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON獲取數據</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
 #pframe{ 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";//存儲數據的變量
   $jsontip.empty();//清空內容
   $.each(data,function(infoIndex,info){
      strHtml += "姓名:"+info["name"]+"<br>";
      strHtml += "性別:"+info["sex"]+"<br>";
      strHtml += "郵箱:"+info["email"]+"<br>";
      strHtml += "<hr>"
    })
   $jsontip.html(strHtml);//顯示處理後的數據 
   })
  })
 
 })
</script>
</head>

<body>
<p id="pframe">
  <p class="loadTitle">
    <input type="button" value="獲取數據" id="btn"/>
  </p>
  <p id="jsonTip">
  </p>
</p>
</body>
</html>

 

You May Also Like