javascript - 停止发送ajax请求而不刷新页面

Question

我创建了 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);
        }
    });
});

Answer 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);
        } 
    });
});

Answer 2

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

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

Answer 3

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

例子

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

或者

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

Answer 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);

        } 

      });

    });