【AJAX】getJSON方法

最新推荐文章于 2023-04-15 09:34:36 发布

badlyForPapers

最新推荐文章于 2023-04-15 09:34:36 发布

阅读量640

点赞数

分类专栏： AJAX

本文链接：https://blog.csdn.net/happyhaojie/article/details/51080153

版权

AJAX 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

功能：可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：

$.getJSON(url,[data],[callback])

其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

例子：调用getJSON()方法获取服务器中 http://www.imooc.com/data/sport.json 的JSON格式文件中的数据，并将数据中指定的内容显示页面中。

<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("http://www.imooc.com/data/sport.json",function(data){
                        $this.attr("disabled", "true");
                        $.each(data, function (index, <strong>sport</strong>) {
                            if(index==3)
                            $("ul").append("<li>" + <strong>sport["name"]</strong> + "</li>");
                        });
    
                    });
                })
            });
        </script>
</body>

这里需要特别注意的是sport.json数据的格式，才能理解sport['name']的意思，其实等价于data[index]['name']，注意index两边不需要引号，但name需要！

必须要复习一下each的用法！

each处理一维数组

<span style="font-family:Times New Roman;font-size:14px;"> var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   
      alert(val);
  });  </span>

alert(i)将输出0，1，2
alert(val)将输出aaa，bbb，ccc

each处理二维数组

<span style="font-family:Times New Roman;font-size:14px;">var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
　　$.each(arr, function(i, item){      
      alert(i);   
      alert(item);      
　　});  </span>

alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素
alert(item)将输出为 ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']

对此二位数组的处理稍作变更之后

<span style="font-family:Times New Roman;font-size:14px;"> var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
 　　$.each(arr, function(i, item){      
      　　$.each(item,function(j,val){
       　　　　 alert(j);
        　　　　alert(val);
    　}); 
});  </span>

alert(j)将输出为0，1，2，0，1，2，0，1，2

alert(val)将输出为a，aa，aaa，b，bb，bbb，c，cc，ccc

each处理json数据

<span style="font-family:Times New Roman;font-size:14px;"><span style="font-family:Times New Roman;font-size:14px;">var obj = { one:1, two:2, three:3};      
 　　each(obj, function(key, val) {      
      　　alert(key);   
      　　alert(val);      
 　　});  </span></span>

这里alert(key)将输出one two three
alert(val)将输出1，2，3
这边为何key不是数字而是属性呢，因为json格式内是一组无序的属性-值，既然无序，又何来数字呢，注意这里每一个键值对没有用{}括起来，和本例有区别哦。
而这个val等同于obj[key]

badlyForPapers

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【AJAX】getJSON方法

功能：可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：$.getJSON(url,[data],[callback])其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。例子：调用getJSON()方法获取服务器中 htt
复制链接

扫一扫