Get JSON with the jQuery getJSON Method

Posted 2020-10-18

当你需要根据服务器返回的数据来动态改变页面的时候，应用程序接口(API)就派上用场了。

记住，API——应用程序接口(Application Programming Interface)是计算机之间相互交流沟通的工具。

许多网站的应用程序接口(API)都是通过一种称为JSON格式的数据来传输的，JSON 是 javascript Object Notation的简写。

其实如果你曾经创建过JS对象的话，你就已经使用了这种数据格式，JSON是一种非常简洁的数据格式。

它通常表现为了两种形式，一种为单个对象，一种为多个对象

单个对象类似于：
{name:‘盖伦‘,advantage:‘单挑无敌‘}

多个对象类似于：
[{name:‘盖伦‘,advantage:‘单挑无敌‘},{name:‘诺克‘,advantage:‘上单霸主‘}]

每个对象属性和属性值的组合就是我们经常听到的"键值对(key-value pairs)"。

让我们从之前的猫图API拿取数据吧。

你应该在你的点击事件中加入如下的代码：

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function(){
      // 请把你的代码写在这条注释以下
     $.getJSON("/json/cats.json", function(json) {
  $(".message").html(JSON.stringify(json));
});
     // 在这之后，点击"Get Message"按钮。你的Ajax函数将把文字"The message will go here"替换成此从FreeCodeCam的猫图API中获得的原始JSON数据。
      // 请把你的代码写在这条注释以上
    });

  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

 

我们已经从JSON API中获得了数据，现在把它们展现到我们的HTML页面中吧。

这里，我们使用.forEach()函数来循环遍历JSON数据写到htmll变量中。

首先我们定义一个HTML变量，
var html = ""; 。

然后，我们使用.forEach()函数来循环遍历JSON数据写到html变量中，最后把html变量显示到我们的页面中。

整个过程的代码如下：

$.getJSON("/json/cats.json", function(json) {

        var html = "";
        // 请把你的代码写在这条注释以下
        json.forEach(function(val){
          var keys = Object.keys(val);
          html += "<div class = ‘cat‘>";
          keys.forEach(function(key){
            html +="<b> + key + </b>:" + val[key] + "<br>"
          });
          html += "</div><br>";
        });
        
        
        // 请把你的代码写在这条注释以上

提示：示例中难点在于两个forEach循环，而且里面夹杂有字符串拼接，这是最头疼也最容易出错的地方