jQuery中读取本地json文件

   jquery解析JSON

  1.  例子 一：

   json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取，具体示例代码如下，感兴趣的朋友可以参考下哈，希望可以帮助到你

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

url：加载的页面地址
data: 可选项，发送到服务器的数据，格式是key/value
callback:可选项，加载成功后执行的回调函数

目录结构：

1.首先建一个JSON格式的文件userinfo.json 保存用户信息。

如下:

[
  {
    "name":"张国立",
    "sex":"男",
    "email":"zhangguoli@123.com"
  },
  {
    "name":"张铁林",
    "sex":"男",
    "email":"zhangtieli@123.com"
  },
  {
    "name":"邓婕",
    "sex":"女",
    "email":"zhenjie@123.com"
  }
]

2.其次建一个getUserinfo.html页面用于获取JSON文件里的用户信息数据，并显示 

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getJSON获取数据</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.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 = "读取的数据：<br/>";//存储数据的变量
                    $jsontip.empty();//清空内容
                    $.each(data, function (haha, info) {
                        strHtml += "姓名：" + info["name"] + "<br>";
                        strHtml += "性别：" + info["sex"] + "<br>";
                        strHtml += "邮箱：" + info["email"] + "<br>";
                        strHtml += "<hr>"
                    })
                    $jsontip.html(strHtml);//显示处理后的数据
                })
            })

        })
    </script>
</head>
<body>
<div id="divframe">
    <div class="loadTitle">
        <input type="button" value="获取数据" id="btn"/>
    </div>
    <div id="jsonTip">
    </div>
</div>
</body>
</html>

3.【运行】效果图：

 用浏览器打开getUserinfo.html文件，显示

参考：

jQuery中读取json文件示例代码

使用jQuery解析JSON数据

  2.例子 二

1.json文件：test.json

[
  {
    "id": 1,
    "uname":"andy",
    "unumber": 1,
    "courseInfos": [
      {
        "id": 1,
        "cname": "数学",
        "caddress": "1号楼"
      },
      {
        "id": 3,
        "cname": "英语",
        "caddress": "外教楼"
      }
    ]
  },
  {
    "id": 2,
    "uname": "zty",
    "unumber": 2,
    "courseInfos": [
      {
        "id": 2,
        "cname": "化学",
        "caddress": "综合楼"
      },
      {
        "id": 3,
        "cname": "英语",
        "caddress": "外教楼"
      }
    ]
  },
  {
    "id": 3,
    "uname": "巩希波",
    "unumber": 3,
    "courseInfos": []
  },
  {
    "id": 5,
    "uname": "xiaoming",
    "unumber": 4,
    "courseInfos": []
  }
]

2.读取json文件的getUserInfor2.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getJSON获取数据</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.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("test.json", function (data) {
                    var $jsontip = $("#jsonTip");
                    var strHtml = "读取的数据：<br/>";//存储数据的变量
                    $jsontip.empty();//清空内容
                    $.each(data, function (haha, info) {
                        strHtml += "姓名：" + info["uname"] + "<br>";
                        strHtml += "id：" + info["id"] + "<br>";
                        var infos = info["courseInfos"];
                        $.each(infos, function (hehe, info2) {
                            strHtml += "科目：" + info2["cname"] + "<br>";
                            strHtml += "教学楼：" + info2["caddress"] + "<br>";
                            strHtml += "<hr>"
                        })
                    })
                    $jsontip.html(strHtml);//显示处理后的数据
                })
            })

        })
    </script>
</head>
<body>
<div id="divframe">
    <div class="loadTitle">
        <input type="button" value="获取数据" id="btn"/>
    </div>
    <div id="jsonTip">
    </div>
</div>
</body>
</html>

3.用浏览器打开，查看效果图：

posted on 2016-07-01 17:58  皮皮鲁西西  阅读(6122)  评论(1)  编辑  收藏  举报

导航