jQuery中读取本地json文件

时间:2024-03-12 13:33:30

 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.用浏览器打开,查看效果图: