循环ajax有时只提交

Question

我正在处理一个包含多个表单的动态页面，可以由用户添加和删除。我的jquery脚本去找到所有＆＃39;形式＆＃39;元素并用jquerys ajax方法提交它们。这是脚本

$(document).ready(function () {
(function (){
    var id = $(document).data('campaign_id');
    $(document).on('click', '#save-button', function () {
        $('form').each(function (){
            var data = new FormData(this);
            var form = $(this);
            if(!form.parent().hasClass('hideme'))
            {
                $.ajax({
                    url: form.attr('action'),
                    type: 'POST',
                    data:  data,
                    mimeType:"multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(data, textStatus, jqXHR)
                    {
                        console.log('form submitted '+count);
                    }
                });
            }
        });
        window.location.replace('/campaign');
    });
})(); //end SIAF
});//end document.ready

问题出现了，有时只有表单提交，如果我单击保存按钮几次，或者如果我删除最后运行的window.location.redirect，我可以得到它，我怀疑它是要做的事情在提交之前发生了重定向，但在完成一些文档后我不确定解决方案

Answer 1

你被Ajax 的异步性质所困扰。遗憾的是，Ajax不能以程序方式工作。您的成功方法在Ajax请求完成时调用，这取决于您的Internet连接速度和服务器的繁忙程度。

完全有可能，javascript完成其每个循环并且第一个ajax请求仍在发送或等待响应。当javascript准备好进行window.location调用时。

修改

添加了代码来检查表单的数量和ajax请求的数量，一旦它们全部运行，它将重定向

$(document).ready(function () {
(function (){
    var id = $(document).data('campaign_id');
    var numForms = $('form').length;
    var numAjaxRequests= 0;

    $(document).on('click', '#save-button', function () {
        $('form').each(function (){
            var data = new FormData(this);
            var form = $(this);
            if(!form.parent().hasClass('hideme'))
            {
                $.ajax({
                    url: form.attr('action'),
                    type: 'POST',
                    data:  data,
                    mimeType:"multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(data, textStatus, jqXHR)
                    {
                        console.log('form submitted '+count);
                        numAjaxRequests++;
                        if(numAjaxRequests == numForms) {
                          window.location.replace('/campaign');
                        }
                    }
                });
            }
        });

    });
})(); //end SIAF
});//end document.ready