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>

效果圖如下：