将javascript结果添加到图像url

Question

所以，我想要做的是用javascript查询一个Min克拉夫特服务器，使用api获得响应，我想获取.playerlist，并将响应放在这个url (https://cravatar.eu/avatar/ {name} /100.png)中，以供每个连接的人使用。

如果有人知道更好的方法来实现这一点，我将非常感谢您的意见！

我对javascript也很陌生，所以不完全知道Im在做什么:/

这里是我所拥有的HTML (我知道它可能很混乱，它也不是完全我的代码)

<div class="card"> <div class="icon"><img src="https://cdn.worldvectorlogo.com/logos/minecraft-1.svg"></div><div class="header">
  <div class="image"> <img src="https://res.cloudinary.com/lmn/image/upload/e_sharpen:100/f_auto,fl_lossy,q_auto/v1/gameskinnyc/u/n/t/untitled-a5150.jpg" alt="" /> </div>
 
  <h2>Server Status</h2>
  </div>
  <div id="rest">Loading...</div>
  <img src="https://cravatar.eu/avatar/" $face "/>
</div>

​

这是javascript

//Query api at this address

var url = "https://api.minetools.eu/query/play.aydaacraft.online/25565";

$.getJSON(url, function(r) {
    //data is the JSON string
 if(r.error){
    $('#rest').html('Server Offline.');
   return false;
 } 
var p1 = '';
 if(r.Players > 0 ){ p1 = '<br>'+r.Playerlist;  } 

// Text to display below
  $('#rest').html('Total Online: '+r.Players+p1);

// Trying to add playerlist to html url
  $('#face').html+p1;
});

Answer 1

既然您已经粘贴了jQuery代码，我将用jQuery提交我的答案。但是，我建议您学习原始JavaScript，而不是只关注jQuery.它已经成为StackOverflow上的一个模因。

首先，您应该使用$(document).ready包装代码--只有在页面加载后才能运行代码。

$(document).ready(() => {
   // The document is ready, let's run some code!
});

然后将AJAX请求作为常规添加到这个括号中。

$(document).ready(() => {

   let url = "https://api.minetools.eu/query/play.aydaacraft.online/25565";
   $.getJSON(url, response => {
     
   });

});

好的，在写这篇文章时，我检查了OP提供的URL，发现它正在超时，所以我从Minetools文档抓取了一个示例响应。

{
  "MaxPlayers": 200,
  "Motd": "A Minecraft Server",
  "Playerlist": [
     "Connor",
     "Kamil",
     "David"
  ],
  "Players": 3,
  "Plugins": [],
  "Software": "CraftBukkit on Bukkit 1.8.8-R0.2-SNAPSHOT",
  "Version": "1.8.8",
  "status": "OK"
}

因此，在您的JSON响应中，您可以看到Playerlist是一个array，它可以在一个变量中包含多个内容。您也可以通过一个iterate通过array，这就是我们要做的构建图像URL。

我们使用forEach迭代数组。

$(document).ready(() => {

   let url = "https://api.minetools.eu/query/play.aydaacraft.online/25565";
   $.getJSON(url, response => {
      response.Playerlist.forEach(playerName => {
         console.log(playerName);
      });
   });

});
//Console:
//Connor
//Kamil
//David

现在我们正在迭代播放器列表，我们可以开始为这些图像组装URL，并将它们添加到文档的正文中。

我已经清理了您的HTML，请注意我添加的新div#user-images。这将是jQuery从forEach循环中添加图像的地方。

<div class="card"> 
    <div class="icon">
        <img src="https://cdn.worldvectorlogo.com/logos/minecraft-1.svg">
    </div>
    <div class="header">
        <div class="image">
            <img src="https://res.cloudinary.com/lmn/image/upload/e_sharpen:100/f_auto,fl_lossy,q_auto/v1/gameskinnyc/u/n/t/untitled-a5150.jpg" alt="" />
        </div>

        <h2>Server Status</h2>
        
    </div>
    
    <!-- This div tag will need to hide when there is no error, or say when there is. -->
    <div id="rest">Loading...</div>
    
    <!-- The user images will be added inside this div. -->
    <div id="user-images"></div>
</div>

现在我们已经做好了HTML准备，我们可以开始使用jQuery函数appendTo将元素添加到div#user-images中。

$(document).ready(() => {

   let url = "https://api.minetools.eu/query/play.aydaacraft.online/25565";
   $.getJSON(url, response => {
      response.Playerlist.forEach(playerName => {
         $(`<img src="https://cravatar.eu/avatar/${playerName}" />`).appendTo("#user-images");
      });
   });

});

您的div#user-images应该开始填充来自Playerlist数组的播放器的图像。

我注意到您添加了一种简单的方法来显示API是否有错误。我们可以与div#rest交互，根据响应的成功程度显示/隐藏或更改文本。

$(document).ready(() => {

   let url = "https://api.minetools.eu/query/play.aydaacraft.online/25565";
   $.getJSON(url, response => {
      if(response.error){
         $("#rest").html("The server is offline!");
      }else{
         //There is no error, hide the div#rest
         $("#rest").hide();
    
         response.Playerlist.forEach(playerName => {
            $(`<img src="https://cravatar.eu/avatar/${playerName}" />`).appendTo("#user-images");
         });
      }
   });

});

这就是真正的。我希望这能让您对数组有一些了解，并对它们进行迭代，以及一些来自jQuery的DOM函数。