确保ajax请求不会被多次触发

我正在研究一个简单的表单页面，我在想如果有人多次单击提交按钮会发生什么情况（因为我的共享主机似乎在某个时候似乎很慢）。确保ajax请求不会被多次触发

此外，柜面有人想看看我的代码

$.ajax({ 
    url: "submit.php", 
    type: 'POST', 
    data: form, 
    success: function (msg) { 
     $(".ressult").html("Thank You!"); 
    }, 
    error: function() { 
     $(".result").html("Error"); 
    } 
});

有没有办法让它这样用户点击一次后，就不会再直到第一次点击完成运行呢？

谢谢

来源

2013-05-20 Matt

第一次点击后禁用提交按钮。 – NullPointerException

可能的重复http://stackoverflow.com/questions/16651772/how-do-you-stop-a-user-from-repeatedly-clicking-a-jquery-ajax-call – intuitivepixel

你有没有考虑用装载机图像替换您的提交按钮，执行查询，然后重新添加一次查询是否已经完成？

编辑：使用加载器图像是一种普遍的“我正在做某事”指示器，但禁用该按钮也将工作！

来源

2013-05-20 17:10:51

在进行ajax调用之前，您可以禁用提交按钮。然后，如果需要，请在成功时启用它。

来源

2013-05-20 17:10:55 eidsonator

使用布尔标志

if (window.isRunning) return; 
window.isRunning = true; 
$.ajax({ 
      url:"submit.php", 
      type: 'POST', 
      data: form, 
      success: function (msg){     
       $(".ressult").html("Thank You!"); 
      }, 
      error: function(){ 
       $(".result").html("Error"); 
      }, 
      complete : function() { 
       window.isRunning = false; 
      } 
     });

来源

2013-05-20 17:11:08 epascarello

什么是window.isRunning？ –

这是一个全局变量，在这里看到更多的信息：http://stackoverflow.com/questions/11148997/window-variablename – Joe

@Joe感谢吨。 –

您可以使用jQuery的.one()功能：

(function handleSubmit() { 
    $('#submitBtn').one('click', function() { 
     var $result = $('.result'); 
     $.ajax({ 
      url: 'submit.php', 
      type: 'POST', 
      data: form, 
      success: function (msg) { 
       $result.html('Thank You!'); 
       handleSubmit(); // re-bind once. 
      }, 
      error: function() { 
       $result.html('Error'); 
      } 
     }); // End ajax() 
    }); // End one(click) 
}()); // End self-invoked handleSubmit()

* 编辑：*多个提交新增递归。

来源

2013-05-20 17:11:34 AlienWebguy

问题在于用户想要该功能再次运行。 – epascarello

我解决了如何在原始答案中处理多个提交内容，但是在任何方面我都通过示例进行了更新。干杯〜 – AlienWebguy

var $button = $(this); 
$button.prop('disabled', true); // disable the button 
$.ajax({ 
    url:"submit.php", 
    type: 'POST', 
    data: form, 
    success: function (msg){     
     $(".ressult").html("Thank You!"); 
    }, 
    error: function(){ 
     $(".result").html("Error"); 
    }, 
    complete: function() { 
     $button.prop('disabled', false); // enable it again 
    } 
});

来源

2013-05-20 17:11:45

确保ajax请求不会被多次触发

回答

相关问题