zoukankan      html  css  js  c++  java
  • jQuery读取json文件

    转 http://www.jb51.net/article/36678.htm

    1.userInfo.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
        <title>getJSON获取数据</title>
        <script src="http://libs.useso.com/js/jquery/1.11.1/jquery.js"></script>
        <style type="text/css">
            #divframe{ border:1px solid #999; 500px; margin:0 auto;}
            .loadTitle{ background:#CCC; height:30px;}
        </style>
    </head>
    <body>
    <div id="divframe">
        <div class="loadTitle">
            <input type="button" value="获取数据" id="btn"/>
        </div>
        <div id="jsonTip">
        </div>
    </div>
    </body>
    </html>
          <script type="text/javascript">
            $(function(){
                $("#btn").click(function(){
                    $.getJSON("data//json//userInfo.json",function(data){
                        var $jsontip = $("#jsonTip");
                        var strHtml = "123";//存储数据的变量
                        $jsontip.empty();//清空内容
                        $.each(data,function(infoIndex,info){
                            strHtml += "姓名:"+info["name"]+"<br>";
                            strHtml += "性别:"+info["sex"]+"<br>";
                            strHtml += "邮箱:"+info["email"]+"<br>";
                            strHtml += "<hr>"
                        })
                        $jsontip.html(strHtml);//显示处理后的数据
                    })
                })
            })
        </script>

    2.data//json//userInfo.json

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

  • 相关阅读:
    脱壳实践之手动构造输入表
    脱壳实践之寻找OEP——堆栈平衡法
    脱壳实践之寻找OEP——两次内存断点法
    PE文件格式详解(八)
    PE文件格式详解(七)
    PE文件格式详解(六)
    Eclipse 安装 Maven 插件(图文解说)
    在线图片压缩后以ImageIO 流的形式 设置大小显示指定页面
    Android-studio开发 快捷键
    简明 Git 命令速查表(中文版)
  • 原文地址:https://www.cnblogs.com/dengzy/p/5400657.html
Copyright © 2011-2022 走看看