使用两个ajax调用在两个html表中填充数据

populating data in two html tables using two ajax calls

本文关键字：两个 数据 html 填充 ajax 调用      更新时间：2023-09-26

我试图使用两个独立的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"中的任何函数。

当我取消注释注释的for循环时，它不会执行超出for循环的内容。在填充项目列表表之后，它简单地停止执行。因此，"then"函数不会被执行。似乎只有一个表数据填充循环可以存在。

我希望使用ajax一个接一个地填充这两个表。我真的很困惑。有人能给我指正确的方向吗？

为什么需要同时具有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);
    }
  }
});
相关文章：