jQuery Ajax回调中的连接没有执行？

Question

我正在尝试使用 jQuery 构建表格行并将其附加到现有表格。在我的行构建函数中，我需要基于 $.each 循环内的 theJSON.EmployeeID 的当前值进行另一个 Ajax 调用。

内部$.getJSON 执行，检索有效的JSON，并触发它的回调，但包含data.Name 的td 没有连接到trString！ trString 甚至没有收到空的 td，似乎该行根本没有被执行。我是否遗漏了一些明显的东西，或者我滥用了$.getJSON，还是什么？

//This call succeeds and returns valid JSON
$.getJSON("ajax/queries.php?q=licenseMain&oId=" + oId + "&sId=" + sId + "&eId=" + eId + "&inUse=" + inUse + "&page=1", function (licensedata) {
    buildLicenseTable(licensedata);
});

function buildLicenseTable(trArray) { //Build table row-by-row

    var trString = "";

    $.each(JSONforTable, function (key, theJSON) { //Build single table row   
        trString += "<tr>";

        trString += "<td>" + theJSON.LicenseID + "</td>";
        trString += "<td>" + theJSON.LicenseNumber + "</td>";
        trString += "<td>" + theJSON.LicenseType + "</td>";

        //The inner $.getJSON call
        $.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function (data) {
            console.log("*---Callback executing!---*");
            trString += "<td>" + data.Name + "</td>"; //<----This line doesn't execute
        });

        trString += "</tr>";
        $("#bigtable > tbody:last").append(trString);
    });
}

Answer 1

请记住，ajax 是异步的。一旦您的 ajax 触发并返回，您的 buildLicenseTable 函数就已经返回。你有一些选择：

1. 同步执行您的 ajax。不推荐。

2. 重组方法以将所有数据附加到数组中，并在最后一个 ajax 返回后进行构造。此方法的唯一问题是您无法保证这些方法从服务器返回的顺序。

3. 更改您的 ajax 方法以在一次调用而不是多次调用中返回此操作的所有数据。效率更高。

Answer 2

问题在于 AJAX 是异步的，因此您的代码将触发请求并继续执行其余功能。当回调到来时，字符串已经被附加到 DOM 中。要解决它，只需将其更改为这个

     $.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function(data){
          console.log("*---Callback executing!---*");
          trString += "<td>" + data.Name + "</td>";//<----This line doesn't execute

         trString += "</tr>";               
         $("#bigtable > tbody:last").append(trString);
     });

Answer 3

以下代码将为您工作

//This call succeeds and returns valid JSON
$.getJSON("ajax/queries.php?q=licenseMain&oId=" + oId + "&sId=" + sId + "&eId=" + eId + "&inUse=" + inUse + "&page=1", function(licensedata){
    buildLicenseTable(licensedata);
});

function buildLicenseTable(trArray){//Build table row-by-row

    var trString = "";  

    $.each(JSONforTable, function(key, theJSON){//Build single table row   
         trString += "<tr>";

         trString += "<td>" + theJSON.LicenseID + "</td>";
         trString += "<td>" + theJSON.LicenseNumber + "</td>";
         trString += "<td>" + theJSON.LicenseType + "</td>";

         //The inner $.getJSON call
         $.getJSON("ajax/queries.php?q=employee&eID=" + theJSON.EmployeeID, function(data){
              console.log("*---Callback executing!---*");
              trString += "<td>" + data.Name + "</td>";//<----This line doesn't execute

               trString += "</tr>";               
                $("#bigtable > tbody:last").append(trString);
         });
    });
}

正如其他人指出的那样，您的麻烦是因为ajax是异步的，并且在调用getJSON后立即返回而不等待响应。我们只是将您在表中附加数据的代码放在回调函数中