将javascript结果添加到图像url

所以我要做的是用javascript查询Minecraft服务器，通过api返回的响应，我想获取.playerlist，并将每个连接的人的响应放在这个url（{name}/100.png）中

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

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

这是我的HTML（我知道它可能很混乱，它也不完全是我的代码）

服务器状态
加载。。。

下面是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;
});

//此地址的查询api
变量url=”https://api.minetools.eu/query/play.aydaacraft.online/25565";
$.getJSON（url，函数（r）{
//数据是JSON字符串
if（r.error）{
$（'#rest'）.html（'服务器脱机'）；
返回false；
} 
var p1=“”；
如果（r.Players>0）{p1='
'+r.Playerlist；}
//要在下面显示的文本
$（'#rest'）.html（'在线总数：'+r.Players+p1）；
//正在尝试将playerlist添加到html url
$（'#face'）.html+p1；
});

既然您已经粘贴了jQuery代码，我将在jQuery中提交我的答案。但是，我建议您学习基本的JavaScript，不要只关注jQuery

首先，您真的应该将代码包装在

$（文档）中。ready

这将仅在页面加载后运行代码

$（文档）.ready（（）=>{
//文档准备好了，让我们运行一些代码！
});

然后在这个括号内添加AJAX请求

$（文档）.ready（（）=>{
让url=”https://api.minetools.eu/query/play.aydaacraft.online/25565";
$.getJSON（url，响应=>{
});
});

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

{
“超级玩家”：200，
“Motd”：“地雷船服务器”，
“玩家列表”：[
“康纳”，
“卡米尔”，
“大卫”
],
“玩家”：3，
“插件”：[]，
“软件”：“Bukkit 1.8.8-R0.2-SNAPSHOT上的CraftBukkit”，
“版本”：“1.8.8”，
“状态”：“确定”
}

因此，在JSON响应中，您可以看到

Playerlist

是一个

数组

，它可以在一个变量中包含多个内容。您还可以通过

数组

迭代，这就是我们构建图像URL所要做的

我们使用

forEach

遍历数组

$（文档）.ready（（）=>{
让url=”https://api.minetools.eu/query/play.aydaacraft.online/25565";
$.getJSON（url，响应=>{
response.Playerlist.forEach（playerName=>{
console.log（playerName）；
});
});
});
//控制台：
//康纳
//卡米尔
//大卫

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

我已经清理了你的HTML，注意我添加的新的

div#用户图像。这将是jQuery从
forEach
循环添加图像的地方


服务器状态
加载。。。

现在我们已经准备好HTML，我们可以开始使用jQuery函数
appendTo
向
div#user image
添加元素

$（文档）.ready（（）=>{
让url=”https://api.minetools.eu/query/play.aydaacraft.online/25565";
$.getJSON（url，响应=>{
response.Playerlist.forEach（playerName=>{
$（``）。附加到（“#用户图像”）；
});
});
});

您的
div#user image
应该开始填充
Playerlist
数组中的玩家图像

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

$（文档）.ready（（）=>{
让url=”https://api.minetools.eu/query/play.aydaacraft.online/25565";
$.getJSON（url，响应=>{
if（response.error）{
$（“#rest”）.html（“服务器处于脱机状态！”）；
}否则{
//没有错误，隐藏div#rest
$（“#rest”）.hide（）；
response.Playerlist.forEach（playerName=>{
$（``）。附加到（“#用户图像”）；
});
}
});
});

事实就是这样。我希望这能让您对数组有一些了解，并对数组进行迭代，以及jQuery中的一些DOM函数。
当前的代码会发生什么？它不工作了？是否有错误？url响应为“超时”，当我们看不到JSON示意图时，很难为您提供帮助。@ConnorSimpson不应该再出现了，看起来我只是在之前过载了服务…@kimcodes目前的代码只是说有多少在线，然后以文本形式列出。。但我想展示他们的头像，而不是文字感谢你们堆不仅回答了我的问题，而且还教了我更多！我希望今天我能从你那里进一步提高我的技能：）
//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;
});