Zatrzymaj wysyłanie żądania ajaxowego bez odświeżania strony

Question

Utworzono żądanie ajax, które wysyła pewne dane do pliku php na zdarzenie click button. Teraz po przesłaniu danych chcę ograniczyć zapytanie ajaxowe, aby ponownie nie wysyłać danych, klikając przycisk. Wysyła dane tylko po odświeżeniu strony (oznacza to wysłanie danych jednorazowo po wczytaniu strony). Jak mogę zatrzymać takie prośby. Mój kod ajax jest następująca:

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

Wystarczy zastąpić .click() przez .one()

Zapobiegnie to kilka kliknięć od uruchamiając ponownie $.ajax().

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

Jeśli trzeba wykonać post tylko ładowania strony, można po prostu przenieść $.ajax() połączenia z obsługi kliknij na gotowej funkcji dokumentu:

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

Answer 2

Musisz usunąć click eventHandler z przyciskiem po udanej odpowiedzi Ajax.

Przykład

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

lub

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

Answer 3

Dokładniejsza analiza może ograniczać AJAX do jednego odpowiedź (tj był status 200 & & zrobił zwróć wynik, którego szukasz ? Jeśli tak, możesz umieścić ten kod w funkcji success funkcji XHR: requestLog.sendStatus = true;, jeśli chcesz zezwolić na wywołanie zapytania ajax tylko raz, następnie umieść to (requestLog.sendStatus = true;) zaraz po e.preventDefault Jeśli chcesz zezwolić na wywołanie ajax zapobiec, jeśli ich faktycznie była skuteczna odpowiedź, a następnie umieścić requestLog.sendStatus = true w funkcji success obiektu 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; 
     } 
    }); 
}); 

Chcesz uruchomić go po załadowaniu strony tylko raz? Spróbuj tego:

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

Answer 4

Wystarczy zmodyfikować tak:

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

     } 

     }); 

    });