Question

我正在尝试从此链接中读取数据https://www.freecodecamp.com/json/cats.json 但它没有显示任何数据。似乎是什么问题？这是我的主页。页面放在wamp服务器的www文件夹中。

<!DOCTYPE html>
<html>
<head>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
    div.message {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
    } 
</style>
</head>
<body>
<script>


     $(document).ready(function() {

        $("#click").on("click", function() {
          $.getJSON("https://www.freecodecamp.com/json/cats.json", function(json) {

            var html = "";
            // Only change code below this line.
            json.forEach(function(val){
              var keys=Object.keys(val);
              html+="<div class='cat'>";
              keys.forEach(function(key){
                html += "<strong>"+key+"</strong>: " + val[key] +             "<br>";

              });
              html += "</div><br>";

            });


            // Only change code above this line.

            $(".message").html(html);

          });
        });
      });
    </script>


<div id="tops">
<div class="well">
       <input type="text" id="user_id">
       <button type="button" class="btn btn-default" id="click">See</button>
  </div>

</div>
<div id="here" class="well message">
</div>
<!--<script type="text/javascript" src="cros_web.js"></script>-->
</body>
</html>

无法获取json数据

0 个答案: