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

来源：互联网发布：java的annotation 编辑：程序博客网时间：2024/06/04 20:59

使用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":"骑自行车"}]

在本地服务器运行结果：

0 0