防止ajax调用两次触发

我有一个ajax电话

$('#button1').on('click', function(e){ $.ajax({ url: url, type: 'POST', async: true, dataType: 'json', enctype: 'multipart/form-data', cache: false, success: function(data){ }, error: function(){} }); e.stopImmediatePropagation(); return false; }); 

现在，在10分钟后收到回复。 所以ajax调用被多次调用。 为什么会发生这种情况/我们如何才能确保只调用一次ajax调用？

Answer 1

禁用该按钮的替代方法是使用.one（）方法并在回调后重新绑定事件处理程序：

 var clickHandler = function(e){ $.ajax({ url: url, type: 'POST', async: true, dataType: 'json', enctype: 'multipart/form-data', cache: false, success: function(data){ $('#button1').one('click', clickHandler); }, error: function(){} }); e.stopImmediatePropagation(); return false; } $('#button1').one('click', clickHandler); 

Answer 2

根据Brennan的回答，

 $('#button1').on('click', function(e){ $('#button1').attr('disabled', 'disabled'); $.ajax({ url: url, type: 'POST', async: true, dataType: 'json', enctype: 'multipart/form-data', cache: false, success: function(data){ $('#button1').removeAttr('disabled'); }, error: function(){} }); e.stopImmediatePropagation(); return false; }); 

此处按钮将被禁用，并将在success启用

Answer 3

我遇到了同样的问题，当我设置async: false时它会起作用。 示例代码将是这样的

 $('#button1').on('click', function(e){ $.ajax({ url: url, type: 'POST', async: false, dataType: 'json', enctype: 'multipart/form-data', cache: false, success: function(data){ }, error: function(){} }); });