从JSON API获取数据并在HTML中显示

Get data from JSON API and display it in HTML

本文关键字：HTML 显示 数据 JSON API 获取      更新时间：2023-09-26

我试图使用这个minecraft服务器API (JSON)，在我的网页中显示，像…现在有(玩家)连接。JSON文件看起来像这样(外部):

{
"status": true,
"players": {
    "online": 534,
    "max": 900
},
"cache": 1442690473 }

我想获取数据播放器(在线)，并在html段落....上显示它使用JavaScript或Jquery。我搜索了一些解决方案，使用getJSON，但我不能使它工作。我尝试使用AJAX发出请求…

  // AJAX Request to JSON
              $.ajax({
                  url: "https://mcapi.ca/query/mythalium.com/players",
                  // Handle as Text
                  dataType: "text",
                  success: function(data) {
                      // Parse JSON file
                      var json = $.parseJSON(data);
                      //Store data into a variable
                      // Display Players
                      $('#players').html('Currently there are: ' + json.players.now ' users');
                  }
      });

然后用

显示
 <span id="results"></span>

为什么不工作?

您应该将AJAX成功回调更改为:

success: function(data) {
    // Parse JSON file
    var json = $.parseJSON(data);
    //Store data into a variable
    // Display Players
    $('#results').html('Currently there are: ' + json.players.online' + users');
}

问题是你选择了错误的span元素- #players而不是#results，你引用了错误的JSON属性- json.players.now而不是json.players.online，就像你提供的样本响应一样。

数据类型应为JSON。

点击这里观看视频:https://www.youtube.com/watch?v=fEYx8dQr_cQ

你应该没事的。

相关文章：