如何使用 AJAX Jquery 获取 API？答案

【问题标题】：How to get API with AJAX Jquery?如何使用 AJAX Jquery 获取 API？
【发布时间】：2020-04-25 14:54:24
【问题描述】：

如何使用 JSON AJAX Jquery 从 API 获取数据？

我想获取完整的数据，用一个简单的 json ajax jquery 方法

我还是不知道如何简单的获取API数据

当我想获取数据时，我得到了 undefined

在我的代码下面：

<html>
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function()
         {
            var url="https://api.stackexchange.com/2.2/tags/jquery/top-answerers/all_time?site=stackoverflow";
            $.getJSON(url,function(result){
                $.each(result, function(i, data){
                    var user_id=data.user_id;
                    var profile_image=data.profile_image;
                    var post_count=data.post_count;
                    var score=data.score;
                    $("#listview").append("<img src='"+ profile_image +"'>" + user_id + post_count + score);
                });
            });
         });
    </script>
</head>

<body>
    <div id="listview">

    </div>
</body>
</html>

【问题讨论】：

标签： javascript jquery json ajax

【解决方案1】：

要解析数据，需要了解API的数据结构。

{
  items: [
    {
      post_count,
      score,
      user: {
        accept_rate,
        display_name,
        link, // To profile page
        profile_image, // A URL
        reputation,
        user_id, // A Number
        user_type // E.G. "moderator"
      }
    },
    // More of the sample object above.
  ],
  quota_max,
  quote_remaining
}

这个 sn-p 有一些变化，你可以通过查看上面的结构来理解。

<html>
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      var url="https://api.stackexchange.com/2.2/tags/jquery/top-answerers/all_time?site=stackoverflow";
      $.getJSON(url,function(result){
      console.log(result)
        // loop through results.items NOT results
        $.each(result.items, function(i, data){
          var user_id=data.user.user_id; // NOT data.user_id
          var profile_image=data.user.profile_image; // NOT data.profile_image
          var post_count=data.post_count;
          var score=data.score;
          $("#listview").append(`
          <table>
          <tr>
          <td><img src="${profile_image}"></td>
          <td>
            UserID: ${user_id}<br/>
            Post Count: ${post_count}<br/>
            Score: ${score}
          </td>
          </tr>
          </table>
          `);
        });
      });
    </script>
</head>

<body>
    <div id="listview">

    </div>
</body>
</html>

【讨论】：

最好在代码中添加一些文本以使查看者了解其作用。
@QuickSilver 非常感谢您的建议，但我不太明白。也许，你可以告诉我在哪里或如何做到这一点。