堆叠成功的多个AJAX请求(jQuery的)多个、AJAX、jQuery

2023-09-10 20:29:18 作者:借着风拥抱你ペ

我只是测试本地应用程序,并希望让这样的事情:

I'm just testing a local application and wanted to make something like this:

单击按钮,很简单。 执行Ajax请求,并创建一个数据库表。 一旦创建表,进行另一系列的AJAX请求,并根据一些参数,从一系列的选择框得到填充该表。 使用一个进度条,整个事情动画。

奇怪的是,一切工作正常(除了最后一点),但我发现了一些麻烦。

Surprisingly, everything is working fine (apart the last point), but I'm getting some troubles.

表被创建并填充,但是由于某种原因,最后AJAX请求不正确地火,因为它不能正确地传递一个参数。

The table gets created and populated but, for some reasons, the very last AJAX requests doesn't fire correctly, since it's not passing a parameter correctly.

我的Ajax请求都asyncronous,如果我把他们syncronous整个事情会结冰,但所有的请求都正确执行,即使是最后的。

My ajax requests are ALL asyncronous, if I set them syncronous the whole thing will freeze, but all the requests are executed correctly, even the very last one.

例如,让我们说,我不想使用asyncronous请求,以不冻结的页面,能够显示一个进度条。

For instance, let's say that I don't want to use asyncronous requests in order to DON'T freeze the page and be able to show a progress bar.

的问题有以下几点:

是否可以调用同一个脚本两次? 有没有一种有效的方法,以避免其他Ajax请求之前执行Ajax请求?

在这里读了一大堆话题的计算器后,我编辑我的code和尝试:

After reading a whole bunch of topics here in stackoverflow, I edited my code and tried to:

使用jQuery.AJAX原型,而不是jQuery.POST asyncronously设置的一切,为了不冻结的页面,并能够处理进度条 执行紧接着的下一个AJAX请求到父AJAX请求的成功的回调。

在这一点上,我还有另外一个问题:

At this point, I still have another question:

通过堆叠AJAX请求,即家居执行到成功回调将Ajax请求完成后执行它实际上是正确的?

By stacking AJAX requests, is it actually TRUE that everything executed into the "success" callback will be executed AFTER the ajax requests has completed?

这是我在表演什么:

$.ajax({
        type: "POST",
        url: '../libs/php libraries/agenda.php',
        data: {'action':'create>agenda', 'sqlname': createInfo},
        processData: true,
        dataType: "json",
        timeout: 60000,
        async: true,
        success: function(res) {
            $('#popup_content').append(res.log);
            var dateList = new Array();
            var dateObj = new Date();

            var m = dateObj.getMonth();
            var Y = dateObj.getFullYear();
            for (var i = 1; i <= 31; i++) {
                dateList.push(i+"/"+m+"/"+Y);
            }

            for (var i = 0; i < dateList.length; i++) {
                var rs = false;
                    $.ajax({
                        type: 'POST',
                        url: '../libs/php libraries/agenda.php',
                        data: {'action':'validate>date', 'date': dateList[i]},
                        processData: true,
                        timeout: 60000,
                        async: true,
                        dataType: "json",
                        success: function(x) {
                                $('#popup_content').append(x.log);
                                if (x.res == 'true') {
                                    rs = dateList[i];
                                }

                                if (rs != false) {
                                        $.ajax({
                                            type: 'POST',
                                            url: '../libs/php libraries/agenda.php',
                                            data: {'action':'create>day', 'date': rs, 'sqltable': createInfo},
                                            processData: true,
                                            timeout: 60000,
                                            async: true,
                                            dataType: "json",
                                            success: function(newResult) {
                                                console.log(newResult.res);
                                                        $('#popup_content').append(newResult.log);
                                            }
                                        });
                                }
                            }
                        });

            }
        }
    });

第一个AJAX请求正确执行,第二个确实太少,但在第三个(一个与数据:{行动:创建&GT;的一天,日期:RS, SQLTABLE:createInfo} )被炒鱿鱼,​​但缺少参数RS上面定义的

the first AJAX request executes correctly, the second one does too, but in the third one (the one with data: {'action':'create>day', 'date': rs, 'sqltable': createInfo}) is getting fired but is missing the parameter rs defined above.

此外,更清晰,RS是我定义的时候,我试图让成功的回调以外的请求,并当在这种情况下,变量RS是使用$。当和$ .done,一个临时变量没用的,但它不会改变任何事情。

Also, to be clearer, rs is a temporary variable I've defined when I was trying to make the requests outside the "success" callback and when using $.when and $.done, in this case the variable rs is useless, but It won't change anything.

此外,如上面说的,整个事情的作品使用syncronous请求,但通过使用asyncronous一个没有。

Again, as said above, the whole thing works using a syncronous request, but doesn't by using an asyncronous one.

此外,我只是要在本地使用该脚本,因此延误或每一个问题涉及到造成服务器和客户端的延迟并不重要。

Moreover, I'm just going to use this script locally, so delays or every problematic related to delays caused by servers and client are not important.

是否有任何理由最后一次请求不以asyncronous要求工作?如果是的话是有这种情况下,一个有价值的解决方案?我也查了一下队列中的主题,但它并没有解决我的问题无论是。出于某些原因,asyncronously,最后AJAX请求得到的只是部分地解雇,因为变量RS是没有得到正确地传递。

Is there any reason for the last request to don't work with an asyncronous request? if so is there a valuable solution for this case? I've also checked the topics about the queue, but it didn't solve my problem either. For some reasons, asyncronously, the last AJAX requests get just partially fired, since the variable rs is not getting passed correctly.

推荐答案

一个解决方法是使用队列()函数。这样一来,只要你想,你可以执行许多功能

One solution is to use queue() function. This way you can execute as many functions as you want

    var ajaxQueue = $({});


    $.ajaxQueue =  function(date, ajaxOpts) {  

        // queue the method. a second call wont execute until this dequeues
        ajaxQueue.queue(function(next) {
            // for this example I serialize params, but you can save them in several variables 
            // and concat into ajaxOpts.data
            var params = method_that_get_params_and_serialize_them();
            ajaxOpts.data = params;      

            ajaxOpts.complete = function() {       
                next();
            };

            $.ajax(ajaxOpts);
        });
    };

那么你的函数没有必要的共享瓦尔的,与并发冲突,它会导致。

Then your functions have no need of shared vars, with the concurrency conflicts that it causes.

这应该是这样的:

$.ajax({
    type: "POST",
    url: '../libs/php libraries/agenda.php',
    data: {'action':'create>agenda', 'sqlname': createInfo},
    processData: true,
    dataType: "json",
    timeout: 60000,
    async: true,
    success: function(res) {
        $('#popup_content').append(res.log);
        var dateList = new Array();
        var dateObj = new Date();

        var m = dateObj.getMonth();
        var Y = dateObj.getFullYear();
        for (var i = 1; i <= 31; i++) {
            dateList.push(i+"/"+m+"/"+Y);
        }

        for (var i = 0; i < dateList.length; i++) {                
                processDate(dateList[i]);

        }
    }
});

function processDate(date){   

    $.ajaxQueue({
                type: 'POST',
                url: '../libs/php libraries/agenda.php',
                data: {'action':'validate>date', 'date': date},
                processData: true,
                timeout: 60000,
                async: true,
                dataType: "json",
                success: function(x) {
                        $('#popup_content').append(x.log);
                        if (x.res == 'true') {
                                $.ajax({
                                    type: 'POST',
                                    url: '../libs/php libraries/agenda.php',
                                    data: {'action':'create>day', 'date': date, 'sqltable': createInfo},
                                    processData: true,
                                    timeout: 60000,
                                    async: true,
                                    dataType: "json",
                                    success: function(newResult) {
                                        console.log(newResult.res);
                                                $('#popup_content').append(newResult.log);
                                    }
                                });
                        }
                    }
                });
    };
}