1. 程式人生 > >jQuery之getjson信息展示

jQuery之getjson信息展示

顯示 += url 創建 按鈕 div 服務器 info char

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

$.getJSON(url,[data],[callback])
參數 描述
url  必需。加載的頁面地址 。
data 可選項,發送到服務器的數據,格式是key/value
callback 可選項,加載成功後執行的回調函數

創建一個json文件Practice_003.json存放在json文件夾下,確保格式正確。

 1 [   
 2 {   
 3 "name":"張三",   
 4 "sex":"男",   
 5 "email":"[email protected]"   
 6
}, 7 { 8 "name":"李四", 9 "sex":"男", 10 "email":"[email protected]" 11 }, 12 { 13 "name":"王五", 14 "sex":"女", 15 "email":"[email protected]" 16 } 17 ]

創建一個HTML頁面,加載json信息

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
5 <title>json Test</title> 6 <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script> 7 <script type="text/javascript"> 8 $(function (){ 9 $("#btn").click(function () { 10 $.getJSON("json/Practice_003.json
", function (data){ 11 var $jsontip = $("#jsonTip"); 12 var strHtml = "123"; 13 //存儲數據的變量 14 $jsontip.empty(); 15 //清空內容 16 $.each(data, function (infoIndex, info){ 17 strHtml += "姓名:" + info["name"] + "<br>"; 18 strHtml += "性別:" + info["sex"] + "<br>"; 19 strHtml += "郵箱:" + info["email"] + "<br>"; 20 strHtml += "<hr>" 21 }) 22 $jsontip.html(strHtml); 23 //顯示處理後的數據 24 }) 25 }) 26 }) 27 </script> 28 29 </head> 30 <body> 31 <p>show some json test</p> 32 <input type="button" value="獲取數據" id="btn"/> 33 <div id="jsonTip"></div> 34 </body> 35 </html>

點擊頁面中的按鈕即可

jQuery之getjson信息展示