Javascript jQuery-从多个URL解析JSON并附加到多个div

我得到了一个包含4个项目的HTML列表（每个项目都分配了自己的id）。对于列表中的每个项目，我尝试使用ajax从多个URL获取JSON数据，然后将数据解析为项目的id

预期结果：每个项目获得JSON数据，然后在其div元素中显示输出

实际结果：只有一个项目能够显示JSON数据

代码：

$（窗口）.bind（“加载”，（）=>{
常量URL=[”http://35.187.8.168:88", "http://35.187.8.168:89"];
const id=[“#serv1_玩家”、“#serv2_玩家”、“#serv3_玩家”、“#serv4_玩家”]；
$.ajax({
url:url.pop（），
数据类型：“文本”，
成功：功能（数据）{
var json=$.parseJSON（数据）；
$（ids.pop（））.html（json.current_players+“players”）；
}
});
});
.worlds面板{
背景色：rgba（3155229.37）；
宽度：184px；
保证金：2倍；
边界半径：10px；
填充：5px15px
}
ul.worlds-dropdown.选中，ul.worlds-dropdown li:悬停{
背景色：rgba（16,246,136,47）；
宽度：164px；
颜色：#fff；
}
ul.worlds-dropdown{
填充：0；
保证金：0-5px；
列表样式类型：无
}
ul.worlds-dropdownli{
填充：8px 16px；
边界半径：6px；
线高：1.429；
-webkit转换：.25s；
转换：.25s
}
下拉式img{
显示：块；
位置：绝对位置；
宽度：24px；
高度：24px；
利润上限：4倍
}
.世界文本{
左边距：35px；
边缘顶部：2倍；
颜色：#fff
}
.标签{
左边距：123px；
位置：绝对位置；
利润上限：-28px；
边界半径：4px；
字体大小：.65rem；
填充物：2px4px；
文本对齐：居中；
颜色：#fff；
背景色：#0091ea；
字体系列：Ubuntu
}



游离脂肪酸


瞬间


瞬间2


仆从


循环浏览URL，并对每个URL进行AJAX调用

试试这个：

$(window).bind("load", () => {
    const arr = [
        { id: 0, url: "http://35.187.8.168:88", container: "#serv1_players" },
        { id: 1, url: "http://35.187.8.168:89", container: "#serv2_players" },
        { id: 2, url: "http://35.187.8.168:90", container: "#serv3_players" },
        { id: 3, url: "http://35.187.8.168:91", container: "#serv4_players" }
    ];

    $.each(arr, function (index, obj) {
        $.ajax({
            url: obj.url,
            dataType: "text",
            success: function (data) {
                var json = $.parseJSON(data);
                $(this.container).html(json.current_players + " players");
            }.bind(obj)
        });
     });
});

“项目列表”+“每个项目”=
对于运行正常的
循环，但是，项目似乎没有排序。它们随机显示，正如您在这里看到的：因为当前它取决于哪个ajax调用首先返回（因为您使用pop）。我将使用一个JSON对象数组{id:0，url:''，容器：'#serv1_players'}来解决这个问题。然后，您可以使用while或for循环遍历这个数组，并使用AJAX调用。假设我想在一个AJAX调用中返回所有内容，从性能角度讲，最有效的方法是什么？AJAX调用只能获得一个url作为输入，因此您必须遍历数组。一个更好的方法是使用$。each（URL、函数（索引、对象）{//do ajax在这里调用并使用我前面评论中的对象}）可以提供这种方法的一个片段吗？非常感谢