jQuery使用getJSON方法获取json数据完整示例

2019-11-20 09:01:05

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery使用getJSON方法获取json数据。分享给大家供大家参考，具体如下：

demo.js：

[  {    "name":"吴者然",    "sex":"男",    "email":"demo1@123.com"  },  {    "name":"吴中者",    "sex":"男",    "email":"demo2@123.com"  },  {    "name":"何开",    "sex":"女",    "email":"demo3@123.com"  }]

demo.html：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>getJSON获取数据</title><script type="text/javascript" src="js/jquery-1.10.1.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/demo.js",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></head><body><div id="divframe">  <div class="loadTitle">    <input type="button" value="获取数据" id="btn"/>  </div>  <div id="jsonTip"> </div></div></body></html>

效果图如下：