Question

我仍然是jQuery的新手，但是我试图从使用AJAX的API获取一些输出到我的网站作为测试，到目前为止它已经做得很好......但我的问题是它重新安排了以奇怪的方式命令。我将在下面发布我的代码然后解释它

HTML

<p id="beatmap-name1"></p>
<p id="beatmap-id1">1179268</p>
<p id="beatmap-name2"></p>
<p id="beatmap-id2">582801</p>
<p id="beatmap-name3"></p>
<p id="beatmap-id3">1179268</p>

的jQuery

$(document).ready(function(){

var counter = 0;
for (var i = 1; i <= 3; i++)
{  
var $mapID = $('#beatmap-id' + i).text();

$.ajax({

  type: 'GET',
  url: 'https://osu.ppy.sh/api/get_beatmaps?k=...&b=' + $mapID,
  success: function(data){
    $.each(data, function(i, map){
      counter++;
      $('#beatmap-name' + counter).text(map.title);
        })
      }

    })
  }
})

我保证我以非常低效的方式这样做，但这只是“它会起作用”还是“它不会起作用”。

总之，jQuery代码将首先在beatmap-id1,2和3中获取地图ID。一个接一个。当它需要其中一个时，它会将它插入一个变量$ mapID，然后将其插入到API URL中。此链接根据输入的ID显示特定的JSON。现在，在输入mapID和JSON代码之后，它应该采用该JSON代码的特定部分并在循环中输出它。但是，出于某种原因，它以一种奇怪的方式输出，而且从不以非常一致的方式输出。例如地图名称（我正在调用输出）将是随机的，不一致的，订单。我该如何解决这样的问题？（我听说JSON重新排列了它输出的顺序，但我不明白它是否适用于这个问题）

Answer 1

关于AJAX的重点是异步。因此，即使您的请求是按特定顺序发送的，也不能保证将以相同的顺序调用回调函数。

例如，如果第二个beatmap需要加载，则可能会在第三个beatmap的回调之后执行与其请求关联的回调。

您应该找到一种方法来使用值为i的变量替换计数器。

编辑：我在函数ajaxRequest中隔离了ajax调用，它似乎正在运行：

编辑2：似乎@artemisian已经提前解决了这个问题。

这是脚本：

    for (var i = 1; i <= 3; i++) {
        ajaxRequest(i);
    }

    function ajaxRequest(j) {
        var $mapID = $('#beatmap-id' + j).text();
        $.ajax({
            type: 'GET',
            url: 'https://osu.ppy.sh/api/get_beatmaps?k=a51bbccbf7f74898e481e8176caf7189ceae36cd&b=' + $mapID,
            success: function (data) {
                $.each(data, function (i, map) {
                    $('#beatmap-name' + j).text(map.title);
                });
            }
        });
    }

Answer 2

对您的随机不一致订单的解释＆＃39;是由于您收到回复的随机顺序。您在代码中触发了多个ajax请求，并且您假设它们将按照您请求的相同顺序进行响应，这就是问题，即：在请求id 2之后，对id 1的请求可能会收到响应在您的代码中，您的计数器将按照您的回复到达的顺序分配，而不是按照您的请求被触发的顺序。

为了修复你的代码，只需删除计数器变量并添加一个匿名函数来解决索引问题：

$(document).ready(function(){

 for (var i = 1; i <= 3; i++)
 {  
   var $mapID = $('#beatmap-id' + i).text();

   var fn  = function(index){
       $.ajax({
          type: 'GET',
          url: 'https://osu.ppy.sh/api/get_beatmaps?k=a51bbccbf7f74898e481e8176caf7189ceae36cd&b=' + $mapID,
          success: function(data){
                      $.each(data, function(var1, map){
                         $('#beatmap-name' + index).text(map.title);
                      })
                   }
        });
   };

  fn(i);
 }
});

jQuery.AJAX / JSON输出混淆

2 个答案: