[JQ权威指南]全局函数getJSON()实现异步获取数据

最新推荐文章于 2020-04-06 08:53:57 发布

厦门德仔

最新推荐文章于 2020-04-06 08:53:57 发布

阅读量4.6k

点赞数

分类专栏： # JQuery 文章标签： getJSON

本文链接：https://blog.csdn.net/david_520042/article/details/51880468

版权

JQuery 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<!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>
    <title>getJSON函数获取数据</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee}
           .divFrame .divContent{padding:8px}
           .divFrame .divContent .clsShow{font-size:14px}
           .btn {border:#666 1px solid;padding:2px;width:80px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数处理获取的数据
                $.getJSON("UserInfo.json", function(data) {
                    $("#divTip").empty(); //先清空标记中的内容
                    var strHTML = ""; //初始化保存内容变量
                    $.each(data, function(InfoIndex, Info) { //遍历获取的数据
                        strHTML += "姓名：" + Info["name"] + "<br>";
                        strHTML += "性别：" + Info["sex"] + "<br>";
                        strHTML += "邮箱：" + Info["email"] + "<hr>";
                    })
                    $("#divTip").html(strHTML); //显示处理后的数据
                })
            })
        })
    </script>
</head>
<body>
   <div class="divFrame">
         <div class="divTitle">
              <input id="Button1" type="button" 
                     class="btn" value="获取数据" />
         </div>
         <div class="divContent">
              <div id="divTip"></div>
         </div>
    </div>
</body>
</html>

UserInfo.json

[
  {
    "name": "赵XX",
    "sex": "男",
    "email": "zhao@163.com"
  },
  {
    "name": "黄XX",
    "sex": "女",
    "email": "huang@163.com"
  },
  {
    "name":"谢XX",
    "sex":"男",
    "email":"1234567@qq.com"

  }
  ,
  {
    "name":"龚XX",
    "sex":"男",
    "email":"1234567@qq.com"
  } ,
  {
    "name":"梁XX",
    "sex":"男",
    "email":"1234567@qq.com"
  }
]