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":"zhangsan@123.com" ???6 }, ???7 { ???8 "name":"李四", ???9 "sex":"男", ??10 "email":"lisi@123.com" ??11 }, ??12 { ??13 "name":"王五", ??14 "sex":"女", ??15 "email":"wangwu@123.com" ??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信息展示
原文地址：http://www.cnblogs.com/Shinea_SYR/p/7749509.html