第二个 AJAX 调用中的函数发生在第一个 AJAX 调用之前

Question

我有两个 ajax 调用一个接一个地运行。在第二个 ajax 调用中，一旦收到响应，数据就会传递给另一个函数进行处理，然后返回。然后将第一个ajax调用的响应数据和第二个ajax调用中函数调用的返回值组合起来，传递给更新一组图表。

这里是ajax调用代码：

                    $.ajax({
                    type: "POST",
                    url: {$js_url} + '/wp-content/plugins/WickCustomLD/categoryDataGrabAjax.php',
                        data: {"userID" : chosenSudent},
                        success: function(data) {
                            var response = data;
                            var response = JSON.parse(response);
                            alert(response);
                            ;
                        },
                        error: function (request, status, error) {
                            alert(request.responseText);
                        }
                        });                     
                        
                    $.ajax({
                    type: "POST",
                    url: {$js_url} + '/wp-content/plugins/WickCustomLD/quizHistory.php',
                        data: {"userID" : chosenSudent},
                        success: function(data) {
                            var response2 = data;
                            var response2 = JSON.parse(response2);
                            
                            returnedData = randomQuizExtractFunc(response2);

                            updateConfigAsNewObject(chart1, chart2, chart3, chart4, chart5, randomQuizChart, response[0],
                                           response[1], response[2], response[3], response[4], response[5], response[6],
                                                      returnedData[0], returnedData[1]);    
                    
                            var result_table = makeTableHTML(response2);
                            quizHistoryDiv.innerHTML = result_table;
                            $(document).ready(function() {
                                $('#quizHistoryTable').DataTable( {
                                    
                                    dom: 'Bfrtip',
                                    buttons: [
                                        'copy', 'csv', 'excel', 'pdf', 'print'
                                    ]
                                    
                                });
                            });
                            ;
                        },
                        error: function (request, status, error) {
                            alert(request.responseText);
                        }
                    }); 

这是在第二个ajax调用中调用并返回的函数：

function randomQuizExtractFunc(quizHistData) {
                    var randomQuizList = [];
                    for(var i=0; i<quizHistData.length; i++) { 
                        if (quizHistData[i][0].startsWith("Random") == true) {
                            randomQuizList.push(quizHistData[i]);
                        }
                    }
                    
                    randomQuizList.sort(function(a,b){
                          return new Date(a[2]) - new Date(b[2])
                        })
                    
                    var randomQuizDataScores = [];
                    var randomQuizDataDates = [];
                    
                    for(var i=0; i<randomQuizList.length; i++) { 
                        randomQuizDataScores.push(randomQuizList[i][1]);
                        randomQuizDataDates.push(randomQuizList[i][2]);
                    }
                    
                    return [randomQuizDataScores, randomQuizDataDates];
                    
                    
                }

我遇到的问题是，尽管第一个 ajax 调用返回了数据（从初始 ajax 调用的警报脚本中可以看出），但当程序运行时，我得到了错误：

Uncaught ReferenceError: response is not defined

看起来第二个ajax调用中的函数是在第一个ajax调用返回数据之前执行的，但我不明白为什么代码肯定应该按照编写顺序执行？

任何关于如何将响应数据获取到图表更新函数调用（以及从第二个 ajax 调用中的函数返回的数据）的帮助都会得到极大的欢迎。

Answer 1

如果您需要等待 ajax 完成您可以使用Promise，但请检查您的项目是否需要支持旧版浏览器：Promise support

new Promise((resolve, reject) => {
    $.ajax({
        type: "POST",
        url: {$js_url} + '/wp-content/plugins/WickCustomLD/categoryDataGrabAjax.php',
        data: {"userID": chosenSudent},
        success: function (data) {
            var response = data;
            var response = JSON.parse(response);
            alert(response);
            resolve(response);//resolve the promise
        },
        error: function (request, status, error) {
            alert(request.responseText);
            reject(request.responseText);//reject the promise
        }
    });
}).then((response) => {
    //if the promise is resolved enter here
    $.ajax({
        type: "POST",
        url: {$js_url} + '/wp-content/plugins/WickCustomLD/quizHistory.php',
        data: {"userID": chosenSudent},
        success: function (data) {
            var response2 = data;
            var response2 = JSON.parse(response2);
            returnedData = randomQuizExtractFunc(response2);
            updateConfigAsNewObject(chart1, chart2, chart3, chart4, chart5, randomQuizChart, response[0],
                    response[1], response[2], response[3], response[4], response[5], response[6],
                    returnedData[0], returnedData[1]);
            var result_table = makeTableHTML(response2);
            quizHistoryDiv.innerHTML = result_table;
            $(document).ready(function () {
                $('#quizHistoryTable').DataTable({

                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ]

                });
            });
            ;
        },
        error: function (request, status, error) {
            alert(request.responseText);
        }
    });
}, (error) => {
    //if the promise is rejected enter here
    console.error(error); // Stacktrace
});

在您的代码中建立的主题和提示：

1. 为什么不将两个 ajax 结合起来
2. 改用dataType: "json" var response = data;var response = JSON.parse(response);,
3. $(document).ready(function () { 这部分是什么