停止发送ajax请求而不刷新页面答案

【问题标题】：Stop sending ajax request without page refresh停止发送ajax请求而不刷新页面
【发布时间】：2013-02-14 12:57:37
【问题描述】：

我创建了 ajax 请求，在按钮单击事件时将一些数据发送到 php 文件。现在提交数据后，我想限制 ajax 请求不要通过单击按钮一次又一次地发送数据。它仅在页面刷新时发送数据（意味着在页面加载时发送一次数据）。我怎样才能停止这样的请求。我的ajax代码如下：

$(".button").click(function (e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        cache: false,
        url: 'my/ajaxrequest.php',
        data: {
            result: 'hi test data'
        },
        success: function (resp) {
            $("#result").html(resp);
        }
    });
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

只需将.click() 替换为.one()

这将防止多次点击再次运行您的$.ajax()。

$(".button").one('click', function(e) {
  e.preventDefault();
  $.ajax({ ... });
}

如果您只需要在页面加载时执行帖子，您只需将$.ajax() 调用从点击处理程序移至文档就绪函数：

$(function() {
    $.ajax({
        type:  'post', 
        cache:  false ,
        url:  'my/ajaxrequest.php',
        data:  { result : 'hi test data' },
        success: function(resp) {
            $("#result").html(resp);
        } 
    });
});

【讨论】：

【解决方案2】：

更深入的分析可以将 ajax 调用限制为一个成功的响应（即状态 200 && 是否返回了您正在寻找的结果？如果是这样，您可以将此代码放在 XHR 函数的 success 函数中：requestLog.sendStatus = true; 如果您只想允许 ajax 请求初始化一次，然后将其 (requestLog.sendStatus = true;) 放在 e.preventDefault 之后响应然后将requestLog.sendStatus = true放入ajax对象的success函数中。

var requestLog = {};
    requestLog.sendStatus = false;

$(".button").click(function(e) {
   e.preventDefault();
   if(requestLog.sendStatus) return;  
   /* requestLog.sendStatus = true; */
   $.ajax({
      type:  'post', 
      cache:  false ,
       url:  'my/ajaxrequest.php',
       data:  { result : 'hi test data' },
       success: function(resp) {
          $("#result").html(resp);
          requestLog.sendStatus = true;
      } 
     });
});

您只想在页面加载时运行一次？试试这个：

(function() {
  $.ajax({
     type:  'post', 
     cache:  false ,
     url:  'my/ajaxrequest.php',
     data:  { result : 'hi test data' },
     success: function(resp) {
          $("#result").html(resp);
     } 
  });
}());

【讨论】：

【解决方案3】：

您需要在 Ajax 响应成功后从按钮中删除 click eventHandler。

示例

$("#Btn").unbind("click");

或

$.off("click", "input:button", foo);

【讨论】：

【解决方案4】：

修改如下：

$(".button").click(function(e) {
      e.preventDefault();
$(".button").unbind('click'); //unbind the bound event after one click
    $.ajax({
        type:  'post', 
       cache:  false ,
        url:  'my/ajaxrequest.php',
        data:  { result : 'hi test data' },
        success: function(resp) {
      $("#result").html(resp);

        } 

      });

    });

【讨论】：