停止发送没有页面刷新的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

通过.one()

只需更换.click()这将防止多次点击您的$.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

您需要从按钮移除click eventHandler成功完成Ajax响应后。

例

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

OR

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

Answer 3

更深入的分析可以限制AJAX调用，以一个成功的响应（即是状态200 & &做到了返回你正在寻找的结果？如果是这样，您可以将此代码放入XHR函数的success函数中：requestLog.sendStatus = true;如果您只希望允许ajax请求初始化一次，则将此（requestLog.sendStatus = true;）置于e.preventDefault之后如果您只想允许ajax调用如果它们实际上是成功的响应则阻止，然后将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); 
    } 
    }); 
}()); 

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

     } 

     }); 

    });