等待所有AJAX调用而不是显示对话框

Question

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

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

对于每个子表单,我在子表单的提交按钮上绑定一个AJAX调用,如下所示:

$('#main').on('click', '.subform_submit', function(){
    // Get this subform's user input
    ...
    $.ajax({
        url: ..,
        type: ..,
        data: /* this subform's data */
    });
});

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

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

单击主提交按钮后,我想显示加载图片,然后显示一个对话框(我bootbox.confirm()在这里使用),直到所有AJAX调用完成.此对话框告诉用户已提交包含子表单的整个表单.但问题是每个AJAX调用可能需要2秒钟才能完成,我不知道调用可能有待完成.如何编写此主提交按钮,以便:

1. 立即显示加载图像,和
2. 所有AJAX调用完成后,隐藏加载图像并显示对话框？

Answer 1

您想要使用.done()来指定应等待 AJAX 异步函数完成的代码。

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