Question

我正在构建基于浏览器的应用程序。在window.load上，我调用了一个jquery AJAX GET函数，该函数应该从服务器获取一些游戏数据。一旦数据存在，我将这些数据解析为我的javascript并构建一些东西。出于这个原因，我将异步设置为 false 。

现在看看这个函数，我想在ajax.success上调用另一个函数，但我想使用刚刚返回的数据以及发送到这个函数的数据作为参数（来自另一个async ajax调用））。我怎样才能做到这一点？感谢

window.onload = function(){
    ajax.getFleets();
    ajax.getShips(fleets);
    manager.draw() // can only draw if both ajax functions have received data !)
}

getShips: function(fleets){

    $.ajax({
        type: "GET",
        url: "getGameData.php",
        datatype: "json",
        data: {
            type: "ships"
            },      
        error: ajax.error,
        success: ajax.mergeData, //want to pass fleets and returnData to this function
        async: false
    });
},

另外，总的来说，使用async：false是正确的方法，对吗？

感谢，

Answer 1

$.ajax会将您的回调函数传递给AJAX请求的结果，因此您可以使用一个简单的匿名函数来获取这两个部分。让我们假设您的回调函数定义如下：< / p>

ajax = {};
ajax.mergeData = function(fleets, ajaxResult) { 
    console.log(fleets);
    console.log(ajaxResult);
};

您可以将回调函数定义为：

function(result) { ajax.mergeData(fleets, result); }

总而言之，你的getShips功能将如下所示：

ajax.getShips = function(fleets) {
    $.ajax({
        type: "GET",
        url: "getGameData.php",
        datatype: "json",
        data: {
            type: "ships"
            },      
        error: ajax.error,
        success: function(result) { ajax.mergeData(fleets, result); }
    });
};

要回答您的第二个问题：async: false是一个已弃用的选项，因此您无法依赖它来运作。它还会锁定浏览器，直到服务器响应，这会导致非常糟糕的用户体验。使用回调函数或承诺在AJAX请求完成时执行操作会好得多。 Here's a short summary of the promises concept可能有用。

这留下了最后一个重要问题：我们如何将这些调用链接在一起，因此getShips()取决于getFleets()的结果，而manager.draw()取决于两者？只需两次调用，您就可以使用回调来逃避; getShips＆＃39;成功回调会调用getFleets和getFleets＆＃39;回调调用manager.draw。这是使A→B→C依赖链工作的最简单方法 - 但我们也可以使用jQuery's promises，这可能使我们的代码更容易理解。

首先，让我们更改getFleets以返回调用$.ajax的结果：

ajax = {};
ajax.getFleets = function() { 
    return $.ajax({ /* Details elided here */ });
}

接下来，让我们更新getShips以对该数据发出AJAX请求，并返回返回合并数据的承诺：

ajax.getShips = function(fleets) { 
    return $.ajax({ /* Details elided again */ })
            .done(function(ajaxResult) { return mergeData(fleets, ajaxResult); });
 };

这有点棘手; $.ajax会返回最终解析为我们的船舶数据的承诺。当它发生时，我们将调用.done中返回合并数据的函数。并且.done 也返回一个承诺 - 所以getShips现在返回一个最终将返回合并数据的承诺。

现在我们可以编写window.onload函数将所有这些链接在一起，只有在所有数据可用时才调用manager.draw：

window.onload = function() { 
    ajax.getFleets()
        .done(ajax.getShips)
        .done(manager.draw);
}

jQuery Ajax with async：false并返回数据

1 个答案: