jQuery使用getJSON方法獲取json數(shù)據(jù)完整示例
本文實例講述了jQuery使用getJSON方法獲取json數(shù)據(jù)。分享給大家供大家參考,具體如下:
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獲取數(shù)據(jù)</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";//存儲數(shù)據(jù)的變量 $jsontip.empty();//清空內(nèi)容 $.each(data,function(infoIndex,info){ strHtml += "姓名:"+info["name"]+"<br>"; strHtml += "性別:"+info["sex"]+"<br>"; strHtml += "郵箱:"+info["email"]+"<br>"; strHtml += "<hr>" }) $jsontip.html(strHtml);//顯示處理后的數(shù)據(jù) }) }) }) </script> </head> <body> <div id="divframe"> <div class="loadTitle"> <input type="button" value="獲取數(shù)據(jù)" id="btn"/> </div> <div id="jsonTip"> </div> </div> </body> </html>
效果圖如下:
這里把 JSON 的后綴名改為 JS,放在 WEB 容器中則可以正常讀取。
PS:這里再為大家推薦幾款json在線工具,相信大家在今后的開發(fā)中可以用得到:
在線JSON代碼檢驗、檢驗、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat
C語言風(fēng)格/HTML/CSS/json代碼格式化美化工具:
http://tools.jb51.net/code/ccode_html_css_json
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jquery的ajax異步請求接收返回json數(shù)據(jù)實例
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼
- jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實現(xiàn)方法
- jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- 詳談 Jquery Ajax異步處理Json數(shù)據(jù).
- JQuery的ajax獲取數(shù)據(jù)后的處理總結(jié)(html,xml,json)
- 用jquery和json從后臺獲得數(shù)據(jù)集的代碼
- jquery解析json格式數(shù)據(jù)的方法(對象、字符串)
- jQuery實現(xiàn)異步獲取json數(shù)據(jù)的2種方式
- jQuery訪問json文件中數(shù)據(jù)的方法示例
相關(guān)文章
jQuery實現(xiàn)點擊圖標(biāo)div循環(huán)放大縮小功能
這篇文章主要介紹了jQuery實現(xiàn)點擊圖標(biāo)div循環(huán)放大縮小功能,這是一個很常見很基礎(chǔ)的功能,下面小編通過實例代碼給大家介紹,需要的朋友可以參考下2018-09-09基于jQuery的網(wǎng)頁右下角彈出廣告(IE7,firefox)
以前曾寫過一個,不過太麻煩了,呵呵```現(xiàn)在改進了一下,其實很簡單:css定位層一直在右下角,用js控制層的高度增減。2010-08-08jquery中dom操作和事件的實例學(xué)習(xí) 下拉框應(yīng)用
jquery中dom操作和事件的實例學(xué)習(xí) 下拉框應(yīng)用實現(xiàn)代碼,需要的朋友可以參考下。2011-12-12DIY jquery plugin - tabs標(biāo)簽切換實現(xiàn)代碼
接觸jquery 2,3個月了,一直都未動手寫過插件。正好最近比較閑,就打算把一直看不順眼的項目中現(xiàn)有的tab改造一番(現(xiàn)有的tab未能做成一個控件,copy,past的代碼太多)。2010-12-12jQuery實現(xiàn)Select左右復(fù)制移動內(nèi)容
這篇文章主要介紹了基于jQuery實現(xiàn)Select左右復(fù)制移動內(nèi)容的實現(xiàn)方法,代碼非常簡單,具有參考借鑒價值,需要的朋友參考下2016-08-08