码迷,mamicode.com
首页 > Web开发 > 详细

关于jquery读取json文件

时间:2020-05-28 16:44:06      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:style   div   ima   https   each   mamicode   hang   用户   info   

1 首先建一个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文件

标签:style   div   ima   https   each   mamicode   hang   用户   info   

原文地址:https://www.cnblogs.com/mmore123/p/12981390.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!