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"
        }
    ]

  • 相关阅读:
    关于软件工程是不是教那些不会写程序的人开发软件的一些看法。
    学习这门课的一些问题
    软件测试的平台
    课程上不明白的问题
    目前流行的源程序版本管理软件和项目管理软件都有哪些, 各有什么优缺点?
    自我介绍
    【软件工程】提问回顾与个人总结
    Google Kick Start 2019 C轮 第一题 Wiggle Walk 题解
    elasticsearch-py 解决 too_long_frame_exception 问题
    Redis集群学习笔记
  • 原文地址:https://www.cnblogs.com/dengzy/p/5400657.html
Copyright © 2011-2022 走看看