jQuery: Postback-Seite nicht mit. Post() -Methode?

Question

Ich habe eine Frage über die Verwendung der Methode .post() von jQuery, ohne die zugehörige Seite zurück zu schreiben.

Dies ist Code für eine Buchseite in einem Bibliothekssystem. Wenn der Benutzer auf die Schaltfläche "Buch zurückgeben" klickt, verwende ich .post() von jQuery, um das in der Datenbank zurückgegebene Buch festzulegen.

<form id="checkoutform"> 
<input type="submit" id="checkout" class="button" value="Return book" /> 
</form> 
$(document).ready(function(){ 
    $("#checkout").click(function() { 
    $.post('/transaction/', { book_id: '{{ book.id }}', user_id: username }, function(data) { 
     alert(data); 
     }); 
    }); 
}); 

Die Datenbanktransaktion funktioniert finden, aber es gibt auch die Seite zurück.

Dies ist kein Problem für sich, aber es ändert das Verhalten der Schaltfläche Zurück - und das ist ein Problem. Wenn der Benutzer auf "Buch zurückgeben" klickt und dann die Schaltfläche "Zurück" im Browser verwendet, wird die Buchseite so angezeigt, wie sie vor der Rückgabe des Buchs war. Daher sieht es so aus, als wäre das Buch noch ausgecheckt.

ist es eine Möglichkeit, entweder zu:

• vermeiden, dass die Seite mit der jquery .post() Methode Entsendung zurück, und ändert nur die Teile der Seite, die ich brauche, oder
• beheben, damit die Zurück-Taste nach oben es geht direkt zurück zur vorherigen Seite?

Vielen Dank!

Answer 1

Eigentlich ist wahrscheinlich, dass Ihre Click-Funktion ausgelöst wird, und dann zusätzlich die Standardfunktionalität (senden Sie das Formular, wenn eine Schaltfläche "Senden" gedrückt wird) auftritt.

Um dies zu verhindern, machen Sie entweder eine einfache Schaltfläche anstelle einer Schaltfläche zum Senden, oder fügen Sie return false am Ende Ihrer Klickfunktion hinzu. Oder werfen Sie einen Blick auf jQuerys event.stopPropagation().

Answer 2

add return false am Ende der Funktion

$(document).ready(function(){ 
    $("#checkout").click(function() { 
    $.post('/transaction/', { book_id: '{{ book.id }}', user_id: username }, function(data) { 
     alert(data); 
     }); 
    return false; 
    }); 

}); 

Answer 3

Versuchen return false; in der Klick-Funktion zu werfen. Vielleicht wird die Seite tatsächlich gesendet und nicht asynchron ausgeführt. Wenn das nicht funktioniert, wie sieht deine Ajax-Seite aus?

Answer 4

Das Hinzufügen von return false am Ende eines jQuery-Ereignishandlers verhindert die Ausführung des standardmäßigen Ereignishandlers. Da in Ihrem Fall das Senden eines Formulars standardmäßig einen POST ausführt, geschieht dies.