Question

我正在制作一个实际上看起来像这样的ajax请求。

$loading = $("#loadingDiv")
function loadBuildList() {
    $.ajax({
    async:true,
    url:"ajax_test.php",
    beforeSend : function() { $loading.show(); },
    success : function() { $loading.hide() }
    });
}

现在，我需要在ajax运行时显示微调器图像。此外，我的代码不应该执行，直到ajax的执行结束。如果我async:false我将无法加载微调器。如果我做async:true我将无法等到ajax执行结束。

以下是我调用函数loadBuildList

的方法

...
//$loading.show(); // this I will use when aync : false
loadBuildList()
//$loading.hide();
...

我该如何处理这种情况？有人可以帮帮我吗？

Answer 1

您应该永远不要使用async:false ，否则您将停止整个执行线程，直到获得响应为止。

异步执行后需要运行的所有内容，在这种情况下需要在回调中写入$.ajax。这是JQuery $.ajax的内部成功。

$loading = $("#loadingDiv")
function loadBuildList() {
    $.ajax({
    async:true,
    url:"ajax_test.php",
    beforeSend : function() { $loading.show(); },
    success : function() { 
      $loading.hide();
      // Stuff after $.ajax goes here.
    },
    fail: function() {
      // Or here.
    }
    });
}

您还应该阅读How do I return the response from an asynchronous call?

Answer 2

根据您提供的代码段，似乎无需使用beforeSend，因为您只需在页面上进行一次调用即可。你可以按照以下方式去做。

$loading = $("#loadingDiv");

function loadBuildList() {
    $loading.show(); // Show spinner before AJAX call
    $.ajax({
        async:true,
        url:"ajax_test.php",
        // beforeSend : function() {  },
        success : function() { $loading.hide() }
    });
}

你仍然可以尝试按照@zurfyx的说法进行操作，但是当你需要集中的东西而不是单独的AJAX调用时，通常会遵循这种做法。

Answer 3

使用.complete处理微调器很方便（因此选择成功和错误）：

function loadBuildList() {
    var loading = $("#loadingDiv")
    loading.show();
    $.ajax({
        url:"ajax_test.php",
        complete : function() { loading.hide() }
    });
}

然而，这个评论更有趣：

我的代码不应该进一步执行

并不是你不想进一步执行，而是你希望在ajax调用完成后继续执行。

您可以通过返回$ .ajax对象（promise）来执行此操作。有了承诺，您可以在自己的代码中添加链调用。这与使用回调参数类似，但通常更灵活：

function loadBuildList() {
    return $.ajax({
    ...
}

// calling code
loadBuildList().done(function() {
    // code to run when the list has loaded
});

在ajax微调器显示中需要帮助

3 个答案: