Dừng gửi yêu cầu ajax mà không cần làm mới trang

Question

Tôi đã tạo yêu cầu ajax gửi một số dữ liệu đến tệp php trên sự kiện nhấp vào nút. Bây giờ sau khi gửi dữ liệu tôi muốn hạn chế yêu cầu ajax không gửi dữ liệu một lần nữa và một lần nữa bằng cách nhấp vào nút. Nó sẽ gửi dữ liệu chỉ trên trang làm mới (có nghĩa là gửi dữ liệu một lần tải trang). Làm thế nào tôi có thể dừng các yêu cầu đó. đang ajax của tôi là như sau:

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

Chỉ cần thay thế .click() bởi .one()

này sẽ ngăn chặn nhiều lần nhấp chuột chạy của bạn $.ajax() một lần nữa.

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

Nếu bạn cần phải thực hiện một bài đăng trên chỉ tải trang, bạn chỉ có thể di chuyển các cuộc gọi $.ajax() từ xử lý nhấp chuột vào tài liệu chức năng sẵn sàng:

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

Answer 2

Bạn cần phải loại bỏ click eventHandler từ nút sau khi phản hồi Ajax thành công.

Ví dụ

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

HOẶC

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

Answer 3

Một phân tích sâu hơn có thể hạn chế các cuộc gọi ajax để một phản ứng thành công (tức là trạng thái 200 & & đã làm nó trả lại kết quả bạn đang tìm kiếm ? Nếu bạn có thể đặt mã này vào hàm success của hàm XHR: requestLog.sendStatus = true; nếu bạn chỉ muốn cho phép yêu cầu ajax khởi tạo một lần sau đó đặt (requestLog.sendStatus = true;) này ngay sau e.preventDefault Nếu bạn muốn chỉ cho phép cuộc gọi ajax trở thành ngăn chặn nếu thực tế của họ là một phản ứng thành công sau đó đặt requestLog.sendStatus = true trong hàm success của đối tượng ajax.

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

Bạn chỉ muốn chạy trên tải trang một lần? Hãy thử điều này:

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

Answer 4

Chỉ việc điều chỉnh như thế này:

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

     } 

     }); 

    });