为什么没有显示效果?

来源:1-2 使用getJSON()方法异步加载JSON格式数据

慕先生6483341

2020-04-23 11:57

为什么我测试不了?自己放在本地VScode调试也不行,但是打开接口还是看到数据还在的。

写回答 关注

3回答

  • 全国bug产出大赛亚军
    2021-03-09 15:54:37

    应该是跨域问题吧,我也是这样,最后直接在网页的编辑器里把url改成相对路径就能看到效果了

  • 慕勒215309
    2020-05-03 17:25:22

    可以运行的,请确认你写对了。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

        <head>

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

            <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

            <link href="style.css" rel="stylesheet" type="text/css" />

        </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('https://www.imooc.com/data/sport.json', function(data){

                            $this.attr("disabled", "true");

                            $.each(data, function (index, sport) {

                                if(index==3)

                                $("ul").append("<li>" + sport["name"] + "</li>");

                            });

        

                        });

                    })

                });

            </script>

        </body>

    </html>


  • 慕尼黑7231240
    2020-04-29 15:26:17

     <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

    $.getJSON("https://www.imooc.com/data/sport.json",function(data)

    注意2个http后面都加上s,function内的参数记得加上data

jQuery基础(五)一Ajax应用与常用插件

如何用jquery实现ajax应用,加入学习,有效提高前端开发速度

69100 学习 · 400 问题

查看课程

相似问题