Javascript 多个ajax请求

我通过封装在for循环中发出多个ajax请求：

for(var o = 1; o <= 2; o++)
                {
                    $.ajax({
                        type: 'GET',
                        url: 'lib/terrain.php',
                        dataType: 'html',
                        data: {o: o},
                        success: function(data) {
                            var objectRuta = Math.floor((Math.random() * 100) + 1); //Slumpar tal mellan 1 & 100
                            angular.element('.click#'+objectRuta).addClass('object').html($("<img src='images/potion.png' title='"+data+"'>"));
                            console.log(data);
                        },
                        error: function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
                    });
                    k=o;                
                } 

如您所见，我对后端进行了两次ajax调用。我的问题是，有时它只从我的后端获取一个值，而不是两个。有时两个值都是正确的。但问题是，有时它只获取一个值，而另一个值为NULL

---

为什么会这样？

错误在您的PHP代码中：

$slump_objects = rand(1, $count_objects);   //Sell of which objects that shoul be viewd at the map.

var_dump($objects[$slump_objects]);

如果

$slump\u objects

获取的值等于

$count\u objects

（数组大小），则

var\u dump（$objects[$slump\u objects]）

返回

NULL

PHP数组从索引

0

开始，最后一个索引是

（$count\u objects-1）

，因此将其中一个语句更改为：

 $slump_objects = rand(0, $count_objects-1);

或

---

下面是使用

done（）

进行第二次调用的示例-

$.ajax({
键入：“GET”，
url:'lib/terrain.php'，
数据类型：“html”，
数据：{o:1}，
}).完成（功能（数据）{
var objectRuta=Math.floor（（Math.random（）*100）+1）；//Sluminar tal mellan 1和100
angular.element（'.click#'+objectRuta.addClass（'object'）.html（$（“”））；
控制台日志（数据）；
$.ajax({
键入：“GET”，
url:'lib/terrain.php'，
数据类型：“html”，
数据：{o:2}，
}).完成（功能（数据）{
var objectRuta=Math.floor（（Math.random（）*100）+1）；//Sluminar tal mellan 1和100
angular.element（'.click#'+objectRuta.addClass（'object'）.html（$（“”））；
控制台日志（数据）；
}).fail（函数（）{
函数（xhr，ajaxOptions，thrownError）{alert（thrownError）；}
})
}).fail（函数（）{
函数（xhr，ajaxOptions，thrownError）{alert（thrownError）；}
});

---

当然，这可以做得更简洁，这只是为了让您了解这项技术。

由于ajax是异步的，您的循环将立即完成，相反，您应该让ajax函数递归，从完成的回调调用它自己：

function doAjax(){
    var total = 2;
    var counter = 0;

    function recursiveAjax(){

        $.ajax({
            //...
            done:function(){
                counter++;
                //call again
                if(counter < total) recursiveAjax();
            }
        });
    }

    //call the first time
    recursiveAjax();
}

函数doAjax（）{
var总计=2；
var计数器=0；
函数recursiveAjax（）{
$.ajax({
//...
完成：函数（）{
计数器++；
//再打一次
if（counter

在这里进行异步调用意味着您的循环在执行第二个调用之前确实要等待第一个调用完成。 有些浏览器会忽略对完全相同url的并行Ajax调用。因此，您可以尝试通过添加循环计数的值来更改url

for(var o = 1; o <= 2; o++)
{
    $.ajax({
        type: 'GET',
        url: 'lib/terrain.php?count='+o,
        dataType: 'html',
        data: {o: 1},
    }).done(function(data) {
        var objectRuta = Math.floor((Math.random() * 100) + 1); //Slumpar tal mellan 1 & 100
        angular.element('.click#'+objectRuta).addClass('object').html($("<img src='images/potion.png' title='"+data+"'>"));
        console.log(data);    
    }).fail(function() {
        function(xhr, ajaxOptions, thrownError) { alert('Error:'+thrownError); }
    });
}

---

for（var o=1；o关于AJAX，需要记住的关键是它是异步的。您的循环不会等到一个调用完成后再开始下一个调用。一如既往地…停止使用
mysql.*
。扩展名已过时，更重要的是，已弃用。请改为
PDO
或
mysqli.*
（请注意，
i
，它代表改进）。您不能让循环等待，至少在这里没有价值，因为循环不知道AJAX请求何时响应。您应该在
done（）中执行第二个AJAX请求
您的第一个AJAX请求的方法。请参阅AJAX中的
async
设置。#user500468您可以使用jquery
Deferred
对象来构建请求队列。我用以下代码得到这个错误：SyntaxError:function语句需要一个名称正如我所说的，这是一个示例，只是为了展示该技术。我没有办法对您进行测试r AJAX。
$.ajax({
    type: 'GET',
    url: 'lib/terrain.php',
    dataType: 'html',
    data: {o: 1},
}).done(function(data) {
    var objectRuta = Math.floor((Math.random() * 100) + 1); //Slumpar tal mellan 1 & 100
    angular.element('.click#'+objectRuta).addClass('object').html($("<img src='images/potion.png' title='"+data+"'>"));
    console.log(data);
    $.ajax({
        type: 'GET',
        url: 'lib/terrain.php',
        dataType: 'html',
        data: {o: 2},
    }).done(function(data) {
        var objectRuta = Math.floor((Math.random() * 100) + 1); //Slumpar tal mellan 1 & 100
        angular.element('.click#'+objectRuta).addClass('object').html($("<img src='images/potion.png' title='"+data+"'>"));
        console.log(data);
    }).fail(function() {
        function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
    })
}).fail(function() {
    function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
});

function doAjax(){
    var total = 2;
    var counter = 0;

    function recursiveAjax(){

        $.ajax({
            //...
            done:function(){
                counter++;
                //call again
                if(counter < total) recursiveAjax();
            }
        });
    }

    //call the first time
    recursiveAjax();
}

for(var o = 1; o <= 2; o++)
{
    $.ajax({
        type: 'GET',
        url: 'lib/terrain.php?count='+o,
        dataType: 'html',
        data: {o: 1},
    }).done(function(data) {
        var objectRuta = Math.floor((Math.random() * 100) + 1); //Slumpar tal mellan 1 & 100
        angular.element('.click#'+objectRuta).addClass('object').html($("<img src='images/potion.png' title='"+data+"'>"));
        console.log(data);    
    }).fail(function() {
        function(xhr, ajaxOptions, thrownError) { alert('Error:'+thrownError); }
    });
}