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＆amp;＆amp;它是否返回您正在寻找的结果？如果是这样，您可以将此代码放入success XHR函数的函数：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 3

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

示例

$("#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);

        } 

      });

    });

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

4 个答案: