如何從 AJAX 調用接收數據，在同一個 function 中，

Question

我有一個 function，我希望使用它從 SQL 調用中獲取的數據動態生成一個 HTML 表。 如您所見， function 接收一個 groupID 並將其傳遞給 function populateDB ，當調用它時將執行 AJAX 調用以從數據庫中檢索一些數據。 在執行下一行代碼之前，我需要在 AJAX 調用之后立即調用 AJAX 的數據。 我知道 AJAX 是異步的，代碼的 rest 可能會在 AJAX 調用返回數據之前執行。 我也知道在這些情況下使用回調函數通常會有所幫助。 我一遍又一遍地閱讀這個堆棧帖子： 如何從異步調用返回響應？

但是，在這種情況下，經過幾個小時的問題解決后，我看不出如何編寫一個回調來為我工作。 我確信我只是不夠聰明，但如果有人能幫我一把並告訴我如何調用populateDB function 並等待響應，然后將該響應返回到makeEditTableHTML function 以進行進一步處理，我將不勝感激.

        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：

        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 function調用代碼：

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

Answer 1

按如下方式重構您的代碼，將成功回調傳遞給$.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;
});

Answer 2

如果我們正在處理異步請求，我們不能簡單地返回，我們應該在 HTML DOM 中返回 append 數據。

在您的情況下，您變得不確定，因為當您嘗試生成表時，數據不存在或者我應該說 AJAX 調用尚未完成。 當 AJAX 調用完成時，DOM 就完成了它的工作。 現在我們必須像使用innerHTML那樣更新 DOM

 function loadUserData() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { renderTable(JSON.parse(this.responseText)); } }; xhttp.open("GET", "https://jsonplaceholder.typicode.com/users", true); xhttp.send(); } function renderTable(studentArray){ var result = "<table border=1><thead><tr><td><b>ID</b></td><td><b>Email</b></td><td><b>Username</b></td><td><b>Name</b></td><td><b>City</b></td></tr></thead>"; result += "<tbody>"; for (var i = 0; i < studentArray.length; i++) { result += "<tr>"; result += "<td>" + studentArray[i]['id'] + "</td>"; result += "<td>" + studentArray[i]['email'] + "</td>"; result += "<td>" + studentArray[i]['username'] + "</td>"; result += "<td>" + studentArray[i]['name'] + "</td>"; result += "<td>" + studentArray[i]['address']['city'] + "</td>"; result += "</tr>"; } result += "</tbody></table>"; document.getElementById("demo").innerHTML = result }

 <!DOCTYPE html> <html> <body> <h2>Generate Table for User Data</h2> <button type="button" onclick="loadUserData()">Load User Data</button> <p id="demo"></p> </body> </html>

Answer 3

如果您想嘗試，也可以嘗試以下建議，首先撥打 Ajax 並在成功回調中構建表。 並在撥打 Ajax 時刪除document.ready() ，因為它不是必需的。

不是調用makeEditTableHTML ，而是在下拉項更改時調用populateDB方法。

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

function makeEditTableHTML(groupID, studentArray, data = []) { // Provide default value to **data** parameter
  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>";

  dataTable.innerHTML = result_table;
}