怎么使用getJSON方法获取json数据实例详解
程序员文章站
2022-04-15 21:52:05
...
这篇文章主要介绍了jQuery使用getJSON方法获取json数据,结合完整实例形式分析了getJSON方法读取与遍历json文件数据的相关技巧,需要的朋友可以参考下
本文实例讲述了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"> #pframe { 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> <p id="pframe"> <p class="loadTitle"> <input type="button" value="获取数据" id="btn"/> </p> <p id="jsonTip"> </p> </p> </body> </html>
效果图如下:
这里把 JSON 的后缀名改为 JS,放在 WEB 容器中则可以正常读取。
以上就是怎么使用getJSON方法获取json数据实例详解的详细内容,更多请关注其它相关文章!
下一篇: php实现下载远程图片保存到本地