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

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

Answer 4

在致电.off()之前，只需致电.on()。

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

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

要仅删除已注册的“ click”事件处理程序，请执行以下操作：

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

Answer 5

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

2分钟后无人接听$ ajax似乎重新发送了请求...

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

防止ajax调用两次触发

5 个答案: