Javascript 正在等待所有AJAX调用，而不是显示对话框

我正在一个动态的在线表单网站上工作。在主窗体中，我有多个子窗体，可以动态添加和删除

<div class='subform'>
    //form fields 
    <input ...>
    ...
    <button class='subform_submit'>
</div>

因此，在该页面中，根据用户的选择，我可能有0到10个子表单。 我在页面底部还有一个主提交按钮，可以同时提交这些子表单和主表单的数据

$('#main').on('click', '#submit', function(e){
    $('.subform_submit').click(); // Submit each subform
    bootbox.confirm({ });
})

单击主提交按钮后，我想显示一个加载图片，然后显示一个对话框（我在这里使用

bootbox.confirm（）

），直到所有AJAX调用完成。 此对话框告诉用户整个表单（包括子表单）已提交。 但问题是，每个AJAX调用可能需要2秒钟才能完成，我不知道may调用如何等待完成。如何编写此主提交按钮，使其能够：

立即显示加载图像，然后

在所有AJAX调用完成后隐藏加载图像并显示对话框

您希望使用，以便指定应等待AJAX异步函数完成的代码

 $.ajax({
     url:..,
     type: ..,
     data: /* this subform's data*/ })
     .done(function() {
         //Put code here
     });

你试过了吗

---

此外，检查

跟踪有多少子表单

$subFormsCount = $('.subform').length;

记录已提交的表格数量

$submittedForms = 0;

每次表单完成提交时，添加到$submittedForms

$.ajax({
  ..
  ..
  done: function(){
    $submittedForms++;
  }
})

创建一个全局计时器，查看提交表单的数量是否与子表单的总数匹配。如果为true，则隐藏对话框

setInterval(function(){
  if($submittedForms == $subFormsCount){
   $('.dialog').show();
  }
}, 50ms)

编辑 您可以跳过全局计时器（因为这可能需要几毫秒的时间）-将检查包含在您的ajax.done中

$.ajax({
  ..
  ..
  done: function(){
    $submittedForms++;

    if($submittedForms == $subFormsCount){
     $('.dialog').show();
    }
  }
})

---

我假设您有9个子窗体和1个主窗体。 8子窗体的代码将相同

这里我使用async:false：意味着在第一个ajax未完成之前，不会调用下一个ajax

示例代码格式：

var id = 5;
$.ajax({
    url:  ,
    type: 'POST',
    data: {'id':id},
    dataType: 'JSON',
    async: false,
    error : function(xhr, textStatus, errorThrown) {
        alert('An error occurred!');
    },
    success : function(response){

    }
});

只需在最后一个子窗体（即第9个子窗体）中设置变量

success : function(response){
        var counter = true;
    }

if(counter){
    /* Code to show dialog.*/
}

---

您可以使用

$.when

等待每个请求完成。像这样的事情应该能让你接近。您基本上希望将所有ajax请求存储在一个数组中，并将其作为参数传递给

when

$('#main').on('click', '.subform_submit', function () {

  var formRequests = $('.subform').map(function () {
    var $form = $(this);
    return $.ajax({
      url: '',
      data: $form.serialzeArray()
    });
  }).get();

  $.when.apply(undefined, formRequests).done(function () {
    console.log('All done!');
  });

});

---

下面是我刚刚制作的一个非常类似的小演示：

对话框代码应该放在哪里？若签入ajax.done，那个么若那个里有0个子表单，而我仍然想看到对话框呢？@monknom我不确定你们在问什么。我以为你想在子窗体提交时显示一个图像，并且只在子窗体提交完成时才显示对话框？对不起，我的英语很差，图像是用于子窗体提交的。但对话框我想告诉大家整个表单已经提交了，不仅仅是子表单上面的代码对此不起作用吗？$submittedForms和$subFormsCount都将==0，因此匹配，应该显示哪个对话框？我不确定我是否完全理解你的问题，也许其他人可以进一步帮助你。@monknom很高兴听到这个消息！祝你的项目好运。感谢@Lewis Best solution！

success : function(response){
        var counter = true;
    }

if(counter){
    /* Code to show dialog.*/
}

$('#main').on('click', '.subform_submit', function () {

  var formRequests = $('.subform').map(function () {
    var $form = $(this);
    return $.ajax({
      url: '',
      data: $form.serialzeArray()
    });
  }).get();

  $.when.apply(undefined, formRequests).done(function () {
    console.log('All done!');
  });

});