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);
},

...但这不起作用，因为＆＃34;数据＆＃34;我的successHandlerRunTest1（数据）收到的对象为空。

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

Answer 1

请勿使用success参数。

使用done method附加回调，因为它会返回链接的承诺，您可以多次调用它：

$.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++;
});

Answer 2

您可以简单地在原始成功回调中传递两个回调。然后使用.apply传递与最初调用成功回调相同的参数。

success: function()
{
    callbackOne.apply(this, arguments);
    callbackTwo.apply(this, arguments);
}

请参阅.apply()方法。

请参阅arguments属性。

另外，作为旁注从未在javascript中放置数据库用户名和密码。因为任何人都可以访问它。

Answer 3

尝试（此模式），使用deferred.always()

HTML

<progress id="p1" max="1" value="0"></progress>
<progress id="p2" max="17" value="0"></progress>
<span id="jsonMsg1"></span>
<span id="progress-bar"></span>

JS

$(function () {
    var count = null;
    var Config = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17];
    for (var propt in Config) {

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

        var callData = jQuery.extend({
            "Db": db,
            "User": user,
            "Password": pword,
            "Function": func
        }, dat);
        var successHandlerRunTest1 = function (data, textStatus, jqxhr) {
            // Do something with download progress
            $("#p1").val(1);
        };
        var response = [];
        $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json; charset=utf-8",
            data: {
                json: JSON.stringify(callData)
            },
            beforeSend: function (jqxhr, setiings) {
                jqxhr.count = ++count;
                // Do something with download progress
                $("#p1").val(0);
            },
            /*
        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: function (jqxhr, textStatus, errorThrown) {
                console.log(errorThrown)
            },
            dataType: "json"
        })
            .always(function (data, textStatus, jqxhr) {

            $('#jsonMsg1').html('Running...');
            response[response.length] = data;
            $("#progress-bar")
                .text(Number(data["..."]) 
                + ' of ' 
                + Config.length + ' tables are done');
            $("#p2").val(Number(data["..."]));
            // Do something with download progress
            if (data["..."] === "17" && jqxhr.count === 18) {

                console.log(data["..."]);
                $('#jsonMsg1').html('Done...');
                $("#progress-bar")
                    .text(Number(data["..."]) + 1 
                    + ' of ' 
                    + Config.length + ' tables are done');

            };
        });
        // $('#jsonRslt1').html(' ');
    };
});

jsfiddle http://jsfiddle.net/guest271314/z6DzF/4/

见

http://api.jquery.com/jQuery.ajax/#jqXHR

http://api.jquery.com/deferred.always/

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

3 个答案: