您的位置:首页 > Web前端 > JavaScript

使用getJSON()方法异步加载JSON格式数据

2016-12-29 09:55 766 查看
使用
getJSON()
方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的调用格式为:
jQuery.getJSON(url,[data],[callback])
$.getJSON(url,[data],[callback])
其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。下面通过一个例子来说明:点击页面中的“加载”按钮,调用
getJSON()
方法获取服务器中JSON格式文件中的数据,并遍历数据,将指定的字段名内容显示在页面中。index.html页面:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.4.min.js"></script></head><body><div id="divtest"><div class="title"><span class="fl">我最爱的运动</span><span class="fr"><input id="btnShow" type="button" value="加载" /></span></div><ul></ul></div><script type="text/javascript">$(function(){$("#btnShow").bind("click",function(){var $this=$(this);$.getJSON("sport.json",function(data){$this.attr("disabled","true");$.each(data,function(index,sport){$("ul").append("<li>"+sport["name"]+"</li>");});})});});</script></body></html>
sport.json页面:
[{"name":"足球"},{"name":"散步"},{"name":"篮球"},{"name":"乒乓球"},{"name":"骑自行车"}]
在本地服务器运行结果:

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: