Eine Form mit Ajax abschicken
Problem
Sie haben eine form, die Sie gerne mit Ajax abschicken würden:
<form action="process.php"> <!-- Wert wird durch JavaScript geändert --> <input type="hidden" name="usingAJAX" value="false" /> <label for="favoriteFood">Was ist Ihr Lieblingsessen?</label> <input type="text" name="favoriteFood" id="favoriteFood" /> <input type="submit" value="Abschicken!" /> </form
Lösung
Selektieren Sie das <form>
-Element und kapern Sie das Event
submit
:
$('form').submit(function(event){ // wir wollen die Form per Ajax abschicken // und ein Aktualisieren der Seite verhindern) event.preventDefault(); // Überprüfen der Daten (wenn nötig) // ... // Hinweis an den Server, dass Ajax genutzt wurde $('input[name="usingAJAX"]',this).val( 'true' ); // Referenz auf die Form speichern var $this = $(this); // URL aus dem form-Element holen var url = $this.attr('action'); // Formdaten aufbereiten var dataToSend = $this.serialize(); // Callback-Funktion für die Server-Antwort var callback = function(dataReceived){ // Verbergen der Form (zum Glück haben wir eine Referenz gesichert) $this.hide(); // hier hat der Server einen HTML-Schnipsel zurückgegeben, // den wir in das DOM einfügen // <div id="result">Ihr Lieblingsessen ist Pizza! Vielen Dank für // die Teilnahme!</div> $('body').append(dataReceived) }; // Typ der empfangenen Daten (wir erwarten HTML) var typeOfDataToReceive = 'html'; // Form abschicken und auf das Ergebnis warten $.get( url, dataToSend, callback, typeOfDataToReceive ) }); // Ende von .submit()
Diskussion
Was geschieht, wenn JavaScript abgeschaltet
ist? Die Form wird abgeschickt und die gesamte Seite mit dem
Ergebnis des Server-Skripts aktualisiert. Ich nutze JavaScript, um
den Wert des Elements <input type="hidden"
name="usingAJAX" />
von false
auf true
zu
ändern. Damit kann das Skript auf Serverseite darüber informiert
werden, wie die Antwort auszusehen hat – entweder eine vollständige
HTML-Seite oder nur die Daten, die für die Ajax-Antwort erwartet
werden.