Question

我有一个多次被激活的ajax调用。

我使用e.stopImmediatePropagation()和return false来阻止它多次触发。是否有另一种确定的射击方式可以不止一次阻止ajax调用。

$(document).on('click', '#button1', function(e){
$.ajax({
    url: 'http://www.page.com',
    data: data,
    method: 'POST',
    success: function(data){

   },
   error: function(err){

   }
});
  e.stopImmediatePropagation();
  return false;
});

Answer 1

您可以使用jQuery .one()

  $(document).one('click', '#button1', function(e){
    $.ajax({
        url: 'http://www.page.com',
        data: data,
        method: 'POST',
        success: function(data){

        },
        error: function(err){

        }
    });
  });

var n = null;
$(document).one('click', '#button1', function(e){
$.ajax({
    url: 'https://gist.githubusercontent.com/anonymous/9a6997f09de9b68c59b2/raw/f7d7b756005ad6d2b88cf0211f78a2990d7d2dc7/content.json',
    data: {},
    method: 'HEAD',
    success: function(data, textStatus, jqxhr) {
      console.log(jqxhr.getAllResponseHeaders())
      $("body").append("<br>textStatus: " + textStatus + "<br>count: " + ++n)
   },
   error: function(err){

   }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">click</button>

Answer 2

您可以使用jquery.data()存储一个布尔值来指示您的函数之前是否已运行过。

$(document).on('click', '#button1', function(e) {
  $button = $("#button1");
  if ($button.data("pressed") !== true) {
    $.ajax({
      url: 'http://non-existentpage',
      data: {},
      method: 'POST',
      success: function(data) {
        alert('ajax');
        $button.data("pressed", true);
      },
      error: function(err) {
        alert('ajax');
        $button.data("pressed", true);
      }
    });
  }
});

#button1 {
  border: 1px solid #000;
  display: inline;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button1">ajax</div>

Answer 3

您还可以添加一个条件，通过在点击后将变量设置为true来检查按钮是否已被点击：

window.document_clicked = false;
$(document).on('click', '#button1', function(e){
    if(!window.document_clicked){
        $.ajax({
            url: 'http://www.page.com',
            data: data,
            method: 'POST',
            success: function(data){
                window.document_clicked = true;
            },
            error: function(err){

            }
        });
    }
});

Answer 4

将async: false添加到当前功能

或USE .click

$('#button1').click(function(e){

});

Answer 5

将async设置为false意味着您调用的语句必须在函数中的下一个语句被调用之前完成。

$(document).on('click', '#button1', function(e){
$.ajax({
    url: 'http://www.page.com',
    data: data,
    async: false, 
    method: 'POST',
    success: function(data){

   },
   error: function(err){

   }
});
  e.stopImmediatePropagation();
  return false;
});

Answer 6

试试这个

$('#button1').click(function(e){
   $.ajax({
   url: 'http://www.page.com',
   data: data,
   method: 'POST',
   success: function(data){
   },
   error: function(err){

   }
});

更简单，它应该解决多个ajax调用的问题。

您也不应该返回false。

使ajax只召唤一次火

6 个答案: