jQuery Ajax 콜백에서 연결이 실행되지 않습니까?

Question

jQuery를 사용하여 테이블 행을 빌드하고 기존 테이블에 첨부하려고합니다. 내 row-building 함수 내에서 $.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가 실행되면 반환됩니다. 몇 가지 옵션이 있습니다 :

1. 동기식으로 ajax를 실행하십시오. 권장하지 않습니다.

2. 메소드를 재구성하여 모든 데이터를 배열에 추가하고 마지막 Ajax가 리턴 한 후 생성하십시오. 이 메서드의 유일한 문제는 이러한 메서드가 서버에서 반환하는 순서가 보장되지 않는다는 것입니다.

3. 아약스 메소드를 변경하여이 작업의 모든 데이터를 복수가 아닌 하나의 호출로 반환하십시오. 훨씬 더 효율적입니다.

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); 
     }); 
    }); 
} 

다른 사람들이 지적했듯이 아약스는 비동기이며,없이 getJSON를 호출 한 후 즉시 반환하기 때문에, 당신의 문제는 응답을 기다리고있다. 콜백 함수의 테이블에 데이터를 추가하는 코드를 넣으십시오.