Question

我正在使用jQuery，我想这样做以便在所有ajax调用完成之前表单提交不起作用。

我想到的一种方法是存储一个布尔值，指示是否有ajax请求正在进行。它会在每个结尾处设置为假。

我不确定这是否是最佳方式，所以我很感激任何意见。

Answer 1

您应该使用整数计数器（var i=0;），而不是使用布尔值。

每次发出AJAX请求时

i++，

每次完成AJAX请求时

i--。

使用计数器的好处是它允许您一次发出多个AJAX请求。使用布尔值时，它会更加错误，因为发出多个请求会导致提交按钮在操作完成之前解锁。

对于用户界面，您应该考虑使用某种“加载”指示符来显示它是否正常工作。然后，一旦计数器回零，您可以隐藏加载指示器并启用提交功能。

Answer 2

处理此问题的好方法：

将提交按钮更改为普通按钮
将一个函数绑定到运行ajax请求
分配jQuery AJAX请求对象的success参数以提交表单

Answer 3

我会采用不同的方法，并在每个ajax请求的回调中检查jQuery的内部$.active或$.ajax.active（取决于版本）。如果$.active为0，则表示没有更多有效请求，然后使用.submit()提交表单。

This questions可能对$.active

有用

Answer 4

在onsubmit事件处理程序中，添加event.preventDefault()。在您的ajax调用中onComplete（或onSuccess，具体取决于您希望如何处理它），创建一个发送表单数据的$.post ajax请求。

如果你有多个ajax请求，你可以创建一个计数器，并在每个请求完成后递增它，当计数器达到正确的数量时，执行$.ajax post。

例如：

var totalRequests = 0;
var counter = 0;
var submit = false;

$('form').submit(function(e){
e.preventDefault();
submit = true;
submitForm();
})

// starting a random number of ajax requests
for (var c=0;c<=Math.floor(Math.random()*11);c++){
totalRequests++;
$.ajax({
  url: 'ajax/'+c+'.html',
  success: function() {
       submitForm();
  }
});

function submitForm(){
    if (counter>=totalRequests && submit){
      $.post(...);
    }
}

Answer 5

我可能会以不同的方式编写我的php文件，因此我可以在一次ajax调用中完成所需的一切，包括表单提交。如果您希望表单实际提交并加载新页面，我仍然会更改php以在一个ajax调用中执行所有操作，然后在ajax回调中提交。

如果您显示一些代码，则会更容易理解

Answer 6

首次加载页面时，您可以将提交按钮的disabled属性设置为disabled，然后在完成所有AJAX查询后重新启用它。通知您的用户数据仍然发送到表单可能是一个好主意，这样他们就不会被禁用的提交按钮混淆。

要确保所有查询都通过，您可以使用jQuery .done()方法。

如果您需要进行客户端验证，只需将事件附加到提交按钮：

$('#submitbutton').submit(function() {
    // function code here
});

在ajaxes完成之前阻止提交

6 个答案: