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

I created ajax request that sends some data to php file on button click event. Now after submitting data I want to restrict the ajax request not to send the data again and again by clicking the button. It sends the data only on page refresh ( means send data one time on page load ). How can I stop such requests. My ajax code is as follow :

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

4 个解决方案

#1

Just replace .click() by .one()

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

This will prevent multiple clicks from running your $.ajax() again.

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

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

If you need to perform a post on page load only, you can simply move the $.ajax() call from the click handler into the document ready function:

如果您只需要在页面加载上执行一个post，那么只需将$.ajax()调用从单击处理程序移动到文档就绪函数:

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

#2

A deeper analysis could restrict the ajax call to one successful response (i.e. was the status 200 && did it return the result you're looking for? If so you can put this code in the success function of the XHR function: requestLog.sendStatus = true; if you only want to allow the ajax request to initialize once then put this ( requestLog.sendStatus = true;) right after the e.preventDefault If you want to only allow the ajax call to be prevented if the their was in fact a succesful response then put the requestLog.sendStatus = true in the success function of the ajax object.

更深入的分析可以将ajax调用限制为一个成功的响应(例如，状态200 &&它是否返回了您正在查找的结果?)如果是这样，您可以将此代码放在XHR函数的success函数:requestLog中。sendStatus = true;如果您只想允许ajax请求初始化一次，那么请将其放入(requestLog)。发送状态= true;)在e后面。如果您希望只阻止ajax调用(如果它们实际上是一个成功的响应)，则使用preventDefault，然后放入requestLog。在ajax对象的成功函数中sendStatus = true。

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

You want to run it on page load only once? Try this:

您只希望在页面加载中运行一次?试试这个:

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

#3

You need to remove click eventHandler from button after successful Ajax response.

在Ajax响应成功后，您需要从按钮上删除单击eventHandler。

Example

例子

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

$(" # Btn).unbind(“点击”);

或

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

美元。(“点击”,“输入:按钮”,foo);

#4

Just modify like this:

只是修改如下:

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

        } 

      });

    });

#1