如果页面未刷新jquery，则单击按钮上的多个ajax调用答案

【问题标题】：multiple ajax calls on button click if page is not refreshed jquery如果页面未刷新jquery，则单击按钮上的多个ajax调用
【发布时间】：2018-12-19 11:35:00
【问题描述】：

如果我单击一次提交按钮，那么 AJAX 调用只会执行一次。太棒了。

问题是如果我不刷新页面并第二次点击提交按钮，那么AJAX调用会执行两次。如果我在不刷新页面的情况下第三次单击该按钮，则会执行三次 AJAX 调用。

我的代码有什么问题？我希望在单击“提交”按钮时只执行一次 AJAX 调用。

<form id="myForm">
  <div class="modal-dialog" role="document">
    <input type="hidden" name="buttonId" id="buttonId">
    <div class="modal-content">
      <div class="modal-body">
        <div class="input-group">
          <span id="commspan" class="input-group-addon">Comment</span>
          <input type="text" name="queuqOther" id="queuqOther" class="form-control">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="btnPause" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</form>

$('#btnPause').on('click', function() {
  var form = $("#myForm");
  form.validate();
  if (form.valid()) {
    $.ajax({
      async: true,
      crossDomain: true,
      url: "http://localhost/postdata",
      xhrFields: {
        withCredentials: true
      },
      success: function(data) {
        console.log(data);
      }
    });
  }
});

【问题讨论】：

$('#btnPause').off().on('click'... 你每次都在附加一个新的处理程序。
您所显示的代码没有附加多个事件处理程序，所以我不确定人们为什么建议off()。 AJAX 返回时是否调用了其他逻辑，因为此代码不会导致您描述的行为

标签： javascript jquery ajax html

【解决方案1】：

检查表单是否有效后，最简单的调整是删除监听器：

const $btnPause = $('#btnPause');
const handler = function() {
  var form = $( "#myForm" );
  form.validate();
  if(form.valid()){
    // remove handler:
    $btnPause.off('click', handler);
    $.ajax({
      async : true,
      crossDomain: true,
      url: "http://localhost/postdata",
      xhrFields: {
        withCredentials: true
      },                            
      success: function (data) {
        console.log(data);
      }
    });
  }
};

$btnPause.on('click', handler);

【讨论】：

对我来说似乎很好jsfiddle.net/w159bj24您遇到的错误究竟是什么？
@CertainPerformance OP 没有在这里绑定多个事件，所以我不明白为什么 off() 会有所作为。
@RoryMcCrossan 我认为问题在于多次单击“提交”会导致多次 ajax 调用，我认为显而易见的解决方案是在第一次发送 ajax 调用时删除处理程序出去。我错过了什么吗？
我删除了 $btnPause.off('click', handler);并更改了 $btnPause.on('click', handler);到 $btnPause.unbind().bind('click', handler);它奏效了
非常感谢。请用我上面的建议更新您的答案，以便对其他人有所帮助:)

【解决方案2】：

尝试使用off() 删除click 事件处理程序，如下所示

$('#btnPause').off('click').on('click',function() {
  var form = $( "#myForm" );
  form.validate();
  if(form.valid()){
    $.ajax({
              async : true,
              crossDomain: true,
              url: "http://localhost/postdata",

              xhrFields: {
                 withCredentials: true
                },                            
              success: function (data) {
                console.log(data);
                  }
          });
    }
});

您也可以使用one() 最多执行一次事件处理程序

$('#btnPause').one('click',function() {/* your code here */});

【讨论】：

【解决方案3】：

一旦完成绑定，请始终取消绑定事件处理程序。例如。将 .off() 用于 .on() 附加事件。

$('#btnPause').off('click').on('click', function() {
//your Code Here
});

【讨论】：

【解决方案4】：

const $btnPause = $('#btnPause');
const handler = function() {
  var form = $( "#myForm" );
  form.validate();
  if(form.valid()){
    // remove handler:
    $btnPause.off('click', handler);
    $.ajax({
      async : true,
      crossDomain: true,
      url: "http://localhost/postdata",
      xhrFields: {
        withCredentials: true
      },                            
      success: function (data) {
        console.log(data);
      }
    });
  }
};

$btnPause.on('click', handler);

【讨论】：

您好，欢迎您，建议在发布答案时说明您的代码：)