javascript - jQuery.ajax - 可以为每个 ajax 请求触发两个成功回调吗？

Question

我正在尝试为多个 ajax 请求显示两个进度条。每次我的 18 个 ajax 请求中的一个完成时，一个进度条达到 100%，当所有 18 个请求都完成时，另一个进度条达到 100%。第一个栏效果很好，并在我的 ajax 成功回调中实现。我无法触发我的第二个柱状图，因为我似乎需要第二次成功回调...

这是我的第一个 ajax 请求的代码。它被调用 18 次，因为那是我的 Config 对象中的项目数。

for (var propt in Config) {

    var db = '...';
    var user = '...';
    var pword = '...';
    var func = '...';
    var dat = {"...": propt };
    var url = "https://...";

    var callData = jQuery.extend({"Db": db, "User": user, "Password": pword, "Function": func}, dat);

    $.ajax({
        type: "POST",
        url: url,
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(callData),
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            //Download progress
            xhr.addEventListener("progress", function(event){
                    var percentComplete = (event.loaded / event.total)*100;
                    //Do something with download progress
                            tableProgressBar(percentComplete);
            }, false);
            return xhr;
        },
        success: successHandlerRunTest1,
        error: errorHandlerRunTest1,
        dataType: "json"
    });
    $('#jsonMsg1').html('Running...');
    $('#jsonRslt1').html(' ');
}

我也想同时触发这个成功函数。

success : function (serverResponse) {
    response[response.length] = serverResponse;
    $('#progress-bar').text(current + ' of ' + total + ' tables are done');
    current++;
},

不幸的是，我不相信我可以从第一个成功函数中调用第二个成功函数，因为第一个函数接收包含 JSON 数据的特殊参数。

我试过类似...

success : function (serverResponse) {
    response[response.length] = serverResponse;
    $('#progress-bar').text(current + ' of ' + total + ' tables are done');
    current++;

    successHandlerRunTest1(data);
},

...但这不起作用，因为我的 successHandlerRunTest1(data) 收到的“数据”对象是空的。

有没有办法对每个 ajax 请求执行两次成功回调？

Answer 1

不要使用success参数。

使用 done method附加回调，因为它返回链接的 promise ，您可以多次调用它:

$.ajax({
    type: "POST",
    url: url,
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(callData),
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.addEventListener("progress", function(event){
            var percentComplete = (event.loaded / event.total)*100;
            tableProgressBar(percentComplete);
        }, false);
        return xhr;
    },
    dataType: "json"
})
.done(successHandlerRunTest1)
.fail(errorHandlerRunTest1)
.done(function (serverResponse) {
    response[response.length] = serverResponse;
    $('#progress-bar').text(current + ' of ' + total + ' tables are done');
    current++;
});