Question

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

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

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

CODE：

$(window).bind("load", () => {

    const urls = ["http://35.187.8.168:88", "http://35.187.8.168:89"];
    const ids = ["#serv1_players", "#serv2_players", "#serv3_players", "#serv4_players"];
    $.ajax({
        url: urls.pop(),
        dataType: "text",
        success: function (data) {
            var json = $.parseJSON(data);
            $(ids.pop()).html(json.current_players + " players");
        }
    });

});

.worlds-panel {
background-color: rgba(3, 155, 229, .37);
width: 184px;
margin: 2px;
border-radius: 10px;
padding: 5px 15px
}
ul.worlds-dropdown .selected, ul.worlds-dropdown li:hover {
background-color: rgba(16, 246, 136, .47);
width: 164px;
color: #fff;
}

ul.worlds-dropdown {
padding: 0;
margin: 0 0 0 -5px;
list-style-type: none
}

ul.worlds-dropdown li {
padding: 8px 16px;
border-radius: 6px;
line-height: 1.429;
-webkit-transition: .25s;
transition: .25s
}

ul.worlds-dropdown img {
display: block;
position: absolute;
width: 24px;
height: 24px;
margin-top: 4px
}

.worlds-text {
margin-left: 35px;
margin-top: 2px;
color: #fff
}

.tag {
margin-left: 123px;
position: absolute;
margin-top: -28px;
border-radius: 4px;
font-size: .65rem;
padding: 2px 4px;
text-align: center;
color: #fff;
background-color: #0091ea;
font-family: Ubuntu
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="worlds-panel">
<ul class="worlds-dropdown">
    <li onclick="setserver('35.187.8.168:443');">
        <img src="resource/images/ffa.png">
        <div class="worlds-text">FFA</div>
        <div class="tag" id="serv1_players"></div>
    </li>
    <li onclick="setserver('35.187.8.168:444');" id="worldsDefault">
        <img src="resource/images/ffa.png">
        <div class="worlds-text">Instant</div>
        <div class="tag" id="serv2_players"></div>
    </li>
    <li onclick="setserver('35.187.8.168:445');">
        <img src="resource/images/ffa.png">
        <div class="worlds-text">Instant 2</div>
        <div class="tag" id="serv3_players"></div>
    </li>
    <li onclick="setserver('35.187.8.168:446');">
        <img src="resource/images/ffa.png">
        <div class="worlds-text">Minions</div>
        <div class="tag" id="serv4_players"></div>
    </li>
</ul>
</div>

Answer 1

循环访问您的网址，并对每个网址进行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)
        });
     });
});

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

1 个答案: