使用兩個Ajax調用填充兩個html表中的數據

Question

我想使用兩個單獨的ajax調用填充兩個表。以下是我的代碼。

var payload = "authUserName=admin&authPassword=admin"; 

$.ajax({ 
    url: "https://appserver.dev.cloud.wso2.com/t/madusanka/webapps/projecttracker-default-SNAPSHOT/services/projecttracker/userservice/user/1/projects", 
    type: "POST", 
    async: false, 
    dataType: "json", 
    data: payload, 
    complete: function(data) { 
    alert("complete " + JSON.stringify(data)); 

//   for(var i = 1; i<= data.projects.project.length; i++){ 
//     var tableRow = "<tr><td>" + data.projects.project[i].projectName + "</td><td>" + data.projects.project[i].startDate + "</td><td>" + data.projects.project[i].endDate + "</td><td>" + data.projects.project[i].statusId + "</td><td>" + "delete" + "</td></tr>"; 
//     $("#projectListTable tbody:last").append(tableRow); 
//   } 

    } 
}).then(function(data) { 

    alert("started"); 

    var payload2 = "authUserName=admin&authPassword=admin"; 

    $.ajax({ 
     url: "https://appserver.dev.cloud.wso2.com/t/madusanka/webapps/projecttracker-default-SNAPSHOT/services/projecttracker/userservice/user/1/projects", 
     type: "POST", 
     async: false, 
     dataType: "json", 
     data: payload2 
    }).then(function(data) { 
     alert("ended"); 
     for(var i = 1; i<= data.projects.project.length; i++){ 
      var tableRow = "<tr><td>" + data.projects.project[i].projectName + "</td><td>" + data.projects.project[i].startDate + "</td><td>" + data.projects.project[i].endDate + "</td><td>" + data.projects.project[i].statusId + "</td><td>" + "delete" + "</td></tr>"; 
      $("#userTable tbody:last").append(tableRow); 
     } 
    });       
}); 

如果我運行上面的代碼，它會運行良好並執行「then」中的任何函數。

當我取消註釋註釋循環時，它將不會執行超出循環。填充項目列表表格​​後，它會停止執行。因此「然後」功能不會被執行。似乎只有一個表數據人口循環可以在那裏。

我希望兩個表都可以使用ajax一個接一個填充。我對此很困惑。有人能指出我正確的方向嗎？

Answer 1

爲什麼你需要同時擁有complete和then回調函數？看看你的代碼，他們似乎沒有做任何不同的事情。你還不如干脆把它們合併這樣的：

var payload = "authUserName=admin&authPassword=admin"; 
$.ajax({ 
    url: "https://appserver.dev.cloud.wso2.com/t/madusanka/webapps/projecttracker-default-SNAPSHOT/services/projecttracker/userservice/user/1/projects", 
    type: "POST",  
    dataType: "json", 
    data: payload, 
    complete: function(data) { 
    alert("complete " + JSON.stringify(data)); 

    for(var i = 1; i<= data.projects.project.length; i++){ 
     var tableRow = "<tr><td>" + data.projects.project[i].projectName + "</td><td>" + data.projects.project[i].startDate + "</td><td>" + data.projects.project[i].endDate + "</td><td>" + data.projects.project[i].statusId + "</td><td>" + "delete" + "</td></tr>"; 
     $("#projectListTable tbody:last").append(tableRow); 
     $("#userTable tbody:last").append(tableRow); 
    } 
    } 
});