zoukankan      html  css  js  c++  java
  • 关于jquery读取json文件

    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;
                 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文件,显示

     
  • 相关阅读:
    angular.element函数
    mknod创建命名管道(I/O缓存)
    谈谈sipXecs及其它【转】
    Linux下判断cpu物理个数、几核
    shell 中判断文件/文件夹是否存在
    一个人可以用Open IMS Core做什么呢
    linux 下更改磁盘名
    PPTP 服务器配置
    IP多媒体子系统[转维基百科]
    针对用编译的方式安装时的卸载
  • 原文地址:https://www.cnblogs.com/mmore123/p/12981390.html
Copyright © 2011-2022 走看看