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

<pre id="Ausgabe"></pre>
<a id="anzeigen" href="javascript:;">anzeigen</a> | <a id="ausblenden" href="javascript:;">ausblenden</a>
<script>
$(document).ready( function() {   
   $("#anzeigen").click( function() {
      $("#Ausgabe").load("/humans.txt");
      // $.get("/humans.txt", function( Daten ) { 
         // $( "#Ausgabe" ).html(Daten);      
      // } );
   } );
   $("#ausblenden").click( function() {
      $( "#Ausgabe" ).html("");      
   } );   
} );
</script>

Erläuterung

Im HTML-Teil des Beispiels gibt es einen Bereich für präformatierten Text sowie zwei Links anzeigen und ausblenden. Die Links führen nirgendwo hin. Stattdessen wird das Ereignis ihres Anklickens im jQuery-Code unterhalb behandelt.

Wird der anzeigen-Link angeklickt, lädt das Script aus dem Startverzeichnis des Webangebots die Datei humans.txt. Es handelt sich um eine einfache Textdatei. Die Datei wird gelesen und ihr Inhalt wird als Inhalt in das pre-Element Ausgabe geschrieben. Dazu ruft das Script die jQuery-Funktion load() auf und wendet sie auf das Objekt des Elements an, in dem der Inhalt ausgegeben werden soll.

Da sich die Webseite mit dem Script auf der gleichen Domain befinden muss wie der Webserver, genügen in der Regel URLs mit relativer oder absoluter Pfadadressierung.

Unterhalb sind im obigen Beispiel drei mit // auskommentierte Zeilen zu sehen. Diese zeigen, wie das, was zuvor mit der load()-Funktion gelöst ist, mit der get()-Funktion bewerkstelligt werden könnte.

Die get()-Funktion hängt direkt am jQuery-Objekt. Sie erwartet mindestens einen Parameter, nämlich die URL-Adresse für den GET-Request.

Als zweiten Parameter können Sie get() eine Funktion übergeben, welche die empfangenen Daten verarbeitet. Dieser Funktion wird ein Parameter übergeben – im Beispiel Daten genannt. Über den Parameter erhält die Funktion die Nutzdaten, die der Webserver beim GET-Request sendet – im Beispiel also den Inhalt der Datei humans.txt. Die Funktion im Beispiel schreibt den Inhalt in den präformatierten Bereich, könnte sie aber auch vorher noch auswerten und anderweitig verarbeiten.

Beim Anklicken des ausblenden-Links wird der Inhalt des präformatierten Bereichs im Beispiel einfach wieder gelöscht.

humans.txt

Die im Beispiel verwendete Datei humans.txt im Wurzelverzeichnis eines Webangebots ist in diesem Fall übrigens keine freie Erfindung des Autors. Näheres zur humans.txt finden Sie auf http://humanstxt.org/DE.

Bei der Verwendung von get() können Sie aber darüber hinaus auch Fehlerfälle abfangen und weitere Optionen nutzen.

Beispiel

var Request = $.get("/php/aktueller-stand.php", function( Daten ) {
   $("#Ausgabe").html(Daten);
} )
  .done(function() {
     console.log("Daten abgerufen, Zeitstempel: " + $.now());
  } )
  .fail(function() {
     $("#Statuszeile2").html("Der aktuelle Stand konnte nicht geladen werden");
  })
  .always(function() {
     $("#Statuszeile1").html("Aktueller Stand:");
  } );
} );

Erläuterung

Rein syntaktisch betrachtet kommt bei diesem Beispiel wieder die jQuery-typische Objektfunktionsverkettung zum Einsatz. Das Schema lautet:
$.get().done().fail().always();

Die Funktion get() kennen Sie bereits. Die Funktion done() können Sie aufrufen, um die erfolgreich erhaltenen Daten des Requests ein weiteres mal zu verarbeiten und etwas anderes zu tun als beim ersten mal. Im Beispiel wird der erste Aufruf in ein Element mit id="Ausgabe" geschrieben. Als done-Aktion wird in die JavaScript-Konsole eine Statusmeldung geschrieben.

Die Funktion fail() ermöglicht Ihnen eine Fehlerbehandlung, falls der Request nicht funktioniert hat. Im Beispiel wird eine entsprechende Meldung in einen gedachten Statusbereich geschrieben. Mit always() können Sie etwas tun, was in jedem Fall passieren soll, also bei jedem erneuten Request mit done(), und egal ob der Request gelingt oder nicht.