Javascript 成功时堆叠多个AJAX请求（jQuery）

我正在测试一个本地应用程序，并希望制作如下内容：

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

• 点击按钮，这很简单
• 执行AJAX请求并创建数据库表
• 创建表后，执行另一系列AJAX请求，并根据从一系列选择框中获取的一些参数填充表
• 使用进度条“动画化”整个过程

令人惊讶的是，一切正常（除了最后一点），但我遇到了一些麻烦

表被创建和填充，但由于某些原因，最后一个AJAX请求没有正确触发，因为它没有正确地传递参数

我的ajax请求都是异步的，如果我将它们设置为同步的，整个过程将冻结，但所有请求都正确执行，即使是最后一个请求

例如，我不想使用异步请求来冻结页面并显示进度条

问题如下：

可以调用同一脚本两次吗

有没有一种有效的方法可以避免在执行其他ajax请求之前执行ajax请求

在阅读了stackoverflow中的大量主题后，我编辑了代码并尝试：

• 使用jQuery.AJAX原型代替jQuery.POST
• 异步设置所有内容，以便不冻结页面并能够处理进度条
• 在父AJAX请求的“成功”回调中执行下一个AJAX请求

在这一点上，我还有另一个问题：

通过堆叠AJAX请求，实际上执行到“success”回调中的所有内容都将在AJAX请求完成后执行吗

这就是我正在表演的：

$.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({
类型：“POST”，
url:“../libs/php libraries/agenda.php”，
数据：{'action'：'create>agenda'，'sqlname'：createInfo}，
processData：对，
数据类型：“json”，
超时：60000，
async:true，
成功：功能（res）{
$（“#弹出内容”）.append（res.log）；
var dateList=新数组（）；
var dateObj=新日期（）；
var m=dateObj.getMonth（）；
var Y=dateObj.getFullYear（）；
对于（var i=1；i来说，一种解决方案是使用queue（）函数

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

这样，您的函数就不需要共享变量，因为它会导致并发冲突

应该是这样的:

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

$.ajax({
类型：“POST”，
url:“../libs/php libraries/agenda.php”，
数据：{'action'：'create>agenda'，'sqlname'：createInfo}，
processData：对，
数据类型：“json”，
超时：60000，
async:true，
成功：功能（res）{
$（“#弹出内容”）.append（res.log）；
var dateList=新数组（）；
var dateObj=新日期（）；
var m=dateObj.getMonth（）；
var Y=dateObj.getFullYear（）；
for（var i=1；谢谢，但它仍然没有执行最后一个AJAX请求，它仍然没有得到日期参数（即dateList[i]，而不是rs）。问题在于“i”var，在for循环中，您同时进行AJAX调用，在第一次成功回调时，我是dateList.lenght，所以dateList[i]是未定义的。我编辑了解决此问题的解决方案。谢谢，我实际上提出了一个与您编辑的解决方案完全不同的解决方案，但它非常相似。为了不必在全局变量中存储值，我决定更进一步，使我的PHP脚本能够返回所需的值。无论如何，它都不起作用w、 有些延迟会发生，但没关系。谢谢！：）