在同一函数内，如何从AJAX调用接收数据， [英] How to receive data from AJAX call, inside the same function,

问题描述

我有一个函数希望使用它从SQL调用中获取的数据动态生成HTML表.如您所见，该函数接收一个groupID并将其传递给函数 populateDB ，该函数在被调用时将执行AJAX调用以从数据库中检索某些数据.在执行下一行代码之前，我需要紧接在AJAX调用之后的那个AJAX调用中的数据.我知道AJAX是异步的，其余代码可能会在AJAX调用返回数据之前执行.我也知道在这些情况下使用回调函数通常会有所帮助.我已经一遍又一遍地阅读以下堆栈文章:如何做我从异步调用返回响应吗?

I have a function that I wish to dynamically generate an HTML table using data that it grabs from an SQL call. As you can see the function receives a groupID and passes it to a function populateDB, which when called will perform an AJAX call to retrieve some data from a DB. I need that data from that AJAX call immediately after the AJAX call before the next lines of code are executed. I know that AJAX is asynchronous and that the rest of the code will execute probably before the data is returned from the AJAX call. I also know that the use of callback functions often help in these situations. I have read this stack post over and over: How do I return the response from an asynchronous call?

但是，在这种情况下以及经过数小时的问题解决后，我看不到如何编写回调程序来为我工作.我敢肯定我不够聪明，但我会非常感激有人帮助我，向我展示如何调用 populateDB 函数并等待响应，然后将该响应返回放入 makeEditTableHTML 函数中进行进一步处理.

However, in this instance, and after hours of problem solving, I cannot see how I can program a callback to work for me here. I am sure I am just not clever enough but I would be so grateful for someone to lend me a hand and show me how I can call the populateDB function and wait for a response, then get that response back into the makeEditTableHTML function for further processing.

        function makeEditTableHTML(studentArray, groupID) { 
                
                populateDB(groupID);

                --- I NEED THE DATA/ARRAY FROM THE AJAX CALL HERE ---
                
                var result = "<table id='dataEditTableid' class='stripe' border=1><thead><tr><td><b>ID</b></td><td><b>Student Email</b></td><td><b>Group ID</b></td><td><b>Target</b></td><td><b>SEN</b></td><td><b>Disadvantaged</b></td></tr></thead>";
                result += "<tbody>";
                for(var i=0; i<studentArray.length; i++) {
                    result += "<tr>";
                    result += "<td>"+studentArray[i][1]+"</td>";
                    result += "<td>"+studentArray[i][0]+"</td>";
                    result += "<td>"+groupID+"</td>";
                    result += "<td id=" + studentArray[i][1] + " contenteditable='true' onBlur='saveToDB(1, this.id, this.innerHTML, "+groupID+")'></td>";
                    result += "<td id=" + studentArray[i][1] + " contenteditable='true' onBlur='saveToDB(2, this.id, this.innerHTML, "+groupID+")'></td>";
                    result += "<td id=" + studentArray[i][1] + " contenteditable='true' onBlur='saveToDB(3, this.id, this.innerHTML, "+groupID+")'></td>";
                    result += "</tr>";
                }
                result += "</tbody></table>";

                return result;
            }

AJAX调用功能:

        function populateDB(groupID) {
            $(document).ready(function(){   
                $.ajax({
                type: "POST",
                url: {$js_url} + '/wp-content/plugins/WickCustomLD/sqlPopulateDB.php',
                    data: {"groupID" : groupID},
                    success: function(data) {
                        data = JSON.parse(data);
                    },
                })});
        }

原始 makeEditTableHTML 函数调用代码:

        var result_table = makeEditTableHTML(MultiStudList[groupIndex], groupIDs[groupIndex]);
        dataTable.innerHTML = result_table;

推荐答案

按如下所示重构代码，将成功回调传递给 $.ajax .

Refactor your code as follows, pass in a success callback to $.ajax.

function populateDB(groupID, successCb) {
    $(document).ready(function(){   
        $.ajax({
            type: "POST",
            url: {$js_url} + '/wp-content/plugins/WickCustomLD/sqlPopulateDB.php',
            data: {"groupID" : groupID},
            success: successCb
        });             
    });
}
        
function makeEditTableHTML(groupID, studentArray, successCb) { 
    return populateDB(groupID, function(data) {
        // Data from AJAX POST
        console.log(data);
        
        var result = "<table id='dataEditTableid' class='stripe' border=1><thead><tr><td><b>ID</b></td><td><b>Student Email</b></td><td><b>Group ID</b></td><td><b>Target</b></td><td><b>SEN</b></td><td><b>Disadvantaged</b></td></tr></thead>";
        result += "<tbody>";
        
        for(var i=0; i < studentArray.length; i++) {
            result += "<tr>";
            result += "<td>"+studentArray[i][1]+"</td>";
            result += "<td>"+studentArray[i][0]+"</td>";
            result += "<td>"+groupID+"</td>";
            result += "<td id=" + studentArray[i][1] + " contenteditable='true' onBlur='saveToDB(1, this.id, this.innerHTML, "+groupID+")'></td>";
            result += "<td id=" + studentArray[i][1] + " contenteditable='true' onBlur='saveToDB(2, this.id, this.innerHTML, "+groupID+")'></td>";
            result += "<td id=" + studentArray[i][1] + " contenteditable='true' onBlur='saveToDB(3, this.id, this.innerHTML, "+groupID+")'></td>";
            result += "</tr>";
        }
        
        result += "</tbody></table>";
        return successCb(result);
    }); 
}

// In the calling function
makeEditTableHTML(MultiStudList[groupIndex], groupIDs[groupIndex], function(result_table) {
    dataTable.innerHTML = result_table;
});

这篇关于在同一函数内，如何从AJAX调用接收数据，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！