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

Posted 2023-05-09

【中文标题】第二个 AJAX 调用中的函数发生在第一个 AJAX 调用之前

【英文标题】：Function inside 2nd AJAX call is happening before the 1st AJAX call

【发布时间】：2020-10-16 18:21:15

【问题描述】：

我有两个 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 调用中的函数返回的数据）的帮助都会得到极大的欢迎。

【问题讨论】：

它是按照那个顺序执行的，但是如果你需要等待ajax完成你可以使用promise或者类似的东西或者在success中添加第二个ajax

如果您需要第一个 ajax 调用的响应，您应该确保，在您的 ajax 请求中使用类似“.done”的东西，触发第二个请求，以确保响应存在。

谢谢你们。能否提供示例代码？

@sw123456 完成。我添加了一些建议

【参考方案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
);

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

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

【讨论】：

谢谢你。我真的很感激你花在这上面的时间。我确信这是必需的，但是，在我的情况下，由于某种原因，在第二个 ajax 调用中仍然无法访问响应？

@sw123456 对不起，我的错误没有看到您在第二个 ajax 成功中使用它，只需将 .then((data_from_prev_ajax) => 更改为 .then((response) => 。我已经更新了答案

非常感谢您！干得好！！