Für POST-Requests stellt jQuery die Funktion post() zur Verfügung. Um das gesamte Geschehen rund um einen POST-Request verständlicher zu machen, wird das folgende Beispiel auch die serverseitige Datenverarbeitung zeigen. Es handelt sich dabei um ein kleines PHP-Script. Um das Beispiel nachzuvollziehen, benötigen Sie eine Webserver-Umgebung mit installiertem PHP.

HTML-Teil des Beispiels

<form id="Aufsatz" action="javascript:;" method="post">
<p>Aufsatzthema:<br>
<input type="text" id="Thema" name="Thema" style="border: solid 1px silver; padding: 3px; width: 300px; font-weight: bold;"></p>
<p>Text des Aufsatzes:<br>
<textarea id="Text" name="Text" style="border: solid 1px silver; width: 640px; padding: 3px; height: 480px;"></textarea></p>
<p><button type="button" id="laden" style="width: 150px;">Daten laden</button> 
<button type="button" id="speichern" style="width: 150px;">Daten speichern</button> 
<span id="Status"></span></p>
</form>  
<script>
$(document).ready( function() {   
   $("#laden").click( function() {
      $.get("./daten.php?lesen=Thema", function( Daten ) {
         $("#Thema").attr("value", Daten);
      } );
      $("#Text").load("./daten.php?lesen=Text");
   } );
   $("#speichern").click( function( Daten ) {
      $.post("./daten.php", $("#Aufsatz").serialize())  
         .done(function( Returnmeldung ) {
            $("#Status").html(Returnmeldung); 
         } )
         .fail(function( Returnmeldung ) {
            $("#Status").html("Speichern fehlgeschlagen!"); 
         } )
   } );   
} );
</script>

Erläuterung

Der HTML-Code des Beispiels definiert ein Formular, in dem ein Schüler einen Aufsatz bearbeiten kann. Das Formular enthält ein Eingabefeld für das Aufsatzthema und einen großen Eingabebereich für den Aufsatztext. Darunter befinden sich zwei Schaltflächen: eine ist mit Daten laden beschriftet, und die andere mit Daten speichern. Neben der Schaltfläche Daten speichern wird noch ein span-Bereich für Statusmeldungen definiert.

Die beiden Schaltflächen lösen die script-relevanten Ereignisse aus. Wenn der Anwender auf Daten laden klickt, wird $("#laden").click( … ) ausgeführt, und beim Klick auf Daten speichern wird $("#speichern").click( … ) ausgeführt.

Beim Laden der Daten werden bereits bekannte Funktionen aufgerufen. Dabei werden Thema und Text des Aufsatzes durch zwei Aufrufe eines Scripts namens daten.php im aktuellen Verzeichnis in die beiden Felder eingelesen. Dem Script wird in beiden Fällen ein GET-Parameter lesen übergeben, der dem Script mitteilt, welche Daten jeweils gewünscht werden. Da load() in den HTML-Elementinhalt schreibt, beim input-Feld für das Thema aber ins value-Attribut geschrieben werden muss, wird dort get() verwendet.

Wenn die Daten gespeichert werden sollen, wird post() aufgerufen. Diese Funktion hängt wie get() direkt am jQuery-Objekt und ist auch genauso aufgebaut wie get(). Als erster Parameter wird eine URL erwartet. Im Beispiel wird dabei wieder das Script daten.php im aktuellen Verzeichnis angefordert. Diesmal jedoch ohne den GET-Parameter lesen. Stattdessen wird ein zweiter Pflichtparameter übergeben, nämlich die Daten, die via HTTP-POST an den Server gesendet werden sollen. Also die Formulardaten mit Thema und Text des Aufsatzes. Dazu wendet das Script die bereits beschriebene jQuery-Funktion serialize() an. Mit $("#Aufsatz").serialize() werden alle Feldnamen und Feldinhalte des Formulars mit id="Aufsatz" in eine url-encodierte Zeichenkette verwandelt. Das ist das Format für url-encodierte POST-Daten.

Ebenso wie bei get() können Sie bei post() die Funktionen done(), fail() und always() durch Punktoperatoren direkt verketten. Im Beispiel wird das genutzt, um im Erfolgsfall mit done() die Erfolgsmeldung, die das PHP-Script zurücksendet, in den Elementinhalt von <span id="Status"></span> zu schreiben. Schlägt der POST-Request aus irgendeinem Grund fehl, schreibt das Script Speichern fehlgeschlagen! in den Elementinhalt des Statuselements.

PHP-Script des Beispiels

<?php
if(isset($_GET['lesen'])) {
   switch($_GET['lesen']) {
      case "Thema":
         echo file_get_contents("./Thema.txt"); break;
      case "Text":
         echo file_get_contents("./Text.txt"); break;
      default:
         echo ""; break;
   }
}
if(isset($_POST['Thema']) and isset($_POST['Text'])) {
   file_put_contents("./Thema.txt", $_POST['Thema']);
   file_put_contents("./Text.txt", $_POST['Text']);
   echo "gespeichert";
}
?>

Erläuterung

Das PHP-Script, das beim GET- oder POST-Request vom Webserver ausgeführt wird, verwaltet zwei Textdateien namens Thema.txt und Text.txt, die sich im gleichen Verzeichnis befinden. In Thema.txt wird nur der das Aufsatzthema gespeichert, und in Text.txt der Text des Aufsatzes.

Das Script testet zunächst, ob es mit dem GET-Parameter lesen aufgerufen wurde. Wenn ja, ist klar, dass der Anwender Daten laden angeklickt hat. In diesem Fall müssen Daten gelesen und gesendet werden. Je nachdem, ob der GET-Parameter lesen den Wert Thema oder Text enthält, wird die entsprechende Datei gelesen und ausgegeben (gesendet).

Dann testet das Script, ob es mit HTTP-POST aufgerufen wurde, bzw. ob die POST-Parameter Thema und Text übergeben wurden. In diesem Fall werden die Werte der beiden POST-Parameter in die dafür vorgesehenen Dateien geschrieben. Am Ende sendet das Script gespeichert. Das ist die Meldung, die jQuery nach dem Anklicken von Daten speichern im Erfolgsfall bei done() in das span-Element mit id="Status" schreibt.

Low-Level-Interface

Für den Fall, dass auch get() und post() nicht die Erfordernisse abdecken, stellt jQuery noch ein „Low-Level-Interface“ für Ajax-Requests zur Verfügung. Es besteht aus einer Reihe von Funktionen, die alle mit „ajax“ beginnen. Ein Teil dieser Funktionen sind Handler-Funktionen für Ajax-Ereignisse. Diese werden in der jQuery-Dokumentation beschrieben:
http://api.jquery.com/category/ajax/global-ajax-event-handlers/
Die eigentlichen Low-Level-Interface-Funktionen werden dort ebenfalls beschrieben:
http://api.jquery.com/category/ajax/low-level-interface/