Wenn Formulare mit method="post" versendet werden, muss der Browser, um einen korrekten HTTP-Request mit den Formulardaten zu erzeugen, diese Daten zu einer Zeichenkette zusammenfügen. Es handelt sich um eine url-encodierte Zeichenkette, die so aussieht, wie Sie es als Anwender von langen Parameterketten in der Adresszeile von Browsern kennen.

Wenn Sie mit Ajax arbeiten und HTTP-POST-Requests mit JavaScript auslösen möchten, während eine Webseite am Bildschirm angezeigt bleibt, müssen Sie sich um das Zusammenfügen der Formulardaten zu einer url-encodierten Zeichenkette selbst kümmern. jQuery stellt hierfür eine Funktion zur Verfügung. Je nach Umgebung erwartet die serverseitige Formularverarbeitung aber keine url-encodierte Zeichenkette, sondern eine JSON-Datenstruktur mit den Formulardaten. Auch hierfür bietet jQuery eine Funktion an.

Beispiel

<form action="#" method="post" style="padding: 20px">
<p>Was bedeutet "CSS"?<br><input type="text" name="Antwort_CSS" value="" style="width: 200px;"></p>
<p>Welcher Code-Schnipsel ist CSS?<br>
<input type="radio" name="CSS_Code" value="1"> $(document).ready()<br>
<input type="radio" name="CSS_Code" value="2"> .document { overflow: scroll;
}<br>
<input type="radio" name="CSS_Code" value="3"> &lt;document type=&quot;script&quot;&gt;</p>
<p><input type="submit" value="Absenden"></p>
</form>
<script type="text/javascript">
$(document).ready( function() {
   $("form").submit(function( e ) {
     console.log( $(this).serialize() );
     console.log( $(this).serializeArray() );
     e.preventDefault(); 
   } );
} );
</script><

Erläuterung

Das Beispiel enthält ein Formular, das aus einer Übungsaufgabe für angehende Webdesigner stammen könnte. Es enthält auch eine Submit-Schaltfläche, womit der Anwender das Formular an die beim action-Attribut angegebene URL versenden kann. Dort ist allerdings nur ein leerer Anker (#) angegeben. Denn im Beispiel soll das Formular gar nicht versendet werden. Das jQuery-Script definiert eine Handler-Funktion für das submit-Ereignis, das eintritt, wenn der Anwender das Formular absendet. Das submit-Ereignis ist auf form-Elemente anwendbar. Der this-Operator steht dann für das Objekt des Formulars inklusive aller seiner Inhalte.

Auf diesen gesamten Inhalt in Objektform werden die jQuery-Funktionen serialize() und serializeArray() angewendet. Mit serialize() wandeln Sie alle Formularinhalte in eine url-encodete Zeichenkette um, wie sie für GET- oder POST-Parameterstrings geeignet ist. Mit serializeArray() wandeln Sie die Formularinhalte in eine JSON-Datsntruktur um, die aus einem Array von anonymen Objekten besteht, wobei jedes Objekt aus Namen und Wert(en) der Formularfelder besteht.

Im Beispiel wird auf das, was von serialize() bzw. serializeArray() erzeugt wird, als Argument an console.log() übergeben. Damit können Sie Daten in die JavaScript-Konsole schreiben. Die JavaScript-Konsole können Sie in den meisten modernen Browsern aufrufen, wenn Sie dort die Developer-Tools, Entwicklerwerkzeuge oder Firebug (unterschiedliche Benennung, je nach Browser) öffnen. Dort können Sie irgendwo auch die JavaScript-Konsole öffnen und sehen, was Scripts oder JavaScript im Zusammenhang mit der angezeigten Webseite an Meldungen oder Daten auf diese Konsole geschrieben haben.

Mit e.preventDefault() wird im obigen Beispiel verhindert, dass das Formular abgesendet wird. Das e ist die Variable, die bei der Handlerfunktion für das submit-Ereignis übergeben wird, und preventDefault() ist eine jQuery-Funktion, mit deren Hilfe eine sonst übliche Reaktion auf ein Ereignis verhindert wird.