防止ajax调用触发两次

Question

我有一个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

我遇到了同样的问题，当我设置

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(){}
    });
});

Answer 3

只需在致电

.off()

之前致电

.on()

。

这将删除所有事件处理程序：

$(element).off().on('click', function() {
    // function body
});

仅删除已注册的“点击”事件处理程序：

$(element).off('click').on('click', function() {
    // function body
});

Answer 4

根据布伦南的回答，

$('#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 5

对我来说，使用 jsonp 也有同样的问题

2 分钟后没有回复 $ajax 似乎重新传输了请求...

我怀疑是浏览器问题，因为jsonp切换到了

并且没有答案，我怀疑浏览器在大约 2 分钟后重新传输请求......

我的解决方法是尽快回复任何内容，10 分钟后我的脚本会询问是否成功...

Answer 6

我面临着同样的问题，将 async 更新为 true 对我来说解决了问题。示例代码： var clickHandler = 函数(e){ $.ajax({ 网址： 网址， 类型：'发布'， 异步：真， 数据类型：'json', enctype: '多部分/表单数据', 缓存：假， 成功：函数（数据）{ $('#button1').one('click', clickHandler); }, 错误：函数（）{} }); e.stopImmediatePropagation(); 返回假； }

$('#button1').one('click', clickHandler);