jQuery von Kopf bis Fuß (German Edition)

Server übertragen können.
    Um Daten an den Server zu übertragen, stellt das HTTP-Protokoll zwei Möglichkeiten zur Verfügung: GET und POST. Der Hauptunterschied zwischen GET und POST besteht in der Art der Datenübertragung. Bei Verwendung der GET-Methode werden die Namen und Werte der Formularfelder als Paare aus Schlüssel und Wert an die URL angehängt. In PHP stehen die Daten dann in einem assoziativen Array mit dem Namen
$_GET[]
zur Verfügung. Die Daten sind in der URL nach dem ? sichtbar.
    Bei Verwendung der POST-Methode werden die Daten auf andere Weise kodiert und sind für den Benutzer in der URL nicht sichtbar. In PHP können Sie auf Daten, die per POST verschickt wurden, über das assoziative Array
$_POST[]
zugreifen. Es enthält sämtliche mit dem Formular übergebenen Daten. Wie beim
$_GET[]-
Array stehen die Daten als Paare aus Schlüssel und Wert zur Verfügung.

    Richtig, das Formular könnte die Informationen direkt schicken ...
    Aber wie im vorigen Kapitel bereits gesagt, haben jQuery und Ajax gewisse Vorteile. So muss die Seite nicht jedes Mal komplett neu geladen werden, um die Daten senden oder empfangen zu können. Allerdings müssen wir sie vor dem Schicken für den Versand mit jQuery und Ajax vorbereiten.

Daten vor dem Versand formatieren
    Bevor wir die Daten (mit Ajax) an den Server schicken können, müssen wir ein paar Vorbereitungen treffen. Wir müssen die Daten in ein Format bringen, das einerseits per Ajax verschickt werden kann und andererseits vom Server verstanden wird. Dafür müssen die Daten in ein einzelnes Objekt serialisiert werden, damit sie in einem einzelnen Paket an den Server geschickt werden können. Für diese Aufgaben gibt es in jQuery zwei Hilfsmethoden:
serialize
und
serializeArray
. Die erste erzeugt aus den Daten einen einzelnen String, bei dem die Schlüssel/Wert-Paare jeweils mit Ampersand-Zeichen ( & ) verbunden sind. Die zweite Methode erzeugt ein assoziatives Array aus den Schlüssel/Wert-Paaren. Das ist zwar immer noch ein einzelnes Objekt, aber es ist strukturierter als das Ergebnis der einfachen
serialize
-Methode. Wir werden Ihnen beide Möglichkeiten zeigen – in unserer Applikation werden wir dann die Methode
serializeArray
verwenden.

Daten an den Server schicken
    jQuery besitzt für das Verschicken von Daten an den Server eine Kurzschriftmethode mit dem Namen
post
. Der
post
-Methode werden mehrere Parameter übergeben, unter anderem die URL, an die die Daten geschickt werden sollen, die zu schickenden Daten und eine Handler-Funktion, die ausgeführt wird, wenn der POST-Request beendet ist.

    jQuery-Codemagneten
    Erstellen Sie für den
#sichern_button
einen Klick-Event-Listener, der sämtliche Formulardaten ausliest und serialisiert und anschließend mit der jQuery-
post
-Methode an den Server übergibt. Die URL für die POST-Methode finden Sie im
action
-Attribut des Formulars. Erstellen Sie außerdem eine Funktion mit dem Namen
formular_zuruecksetzen
, die alle vom Formular übergebenen Werte leert, wenn die POST-Methode erfolgreich war. Zusätzlich muss das standardmäßige Abschicken des Formulars über Submit-Buttons (indem der Wert
false
zurückgegeben wird) abgebrochen werden können, wofür für das Formular mit der ID
neuer_lauefer
ein entsprechender
submit
-Listener eingerichtet wird.
    jQuery-Codemagneten: Lösung
    Erstellen Sie für den
#sichern_button
einen Klick-Event-Listener, der sämtliche Formulardaten ausliest und serialisiert und anschließend mit der jQuery-
post
-Methode an den Server übergibt. Die URL für die POST-Methode finden Sie im
action
-Attribut des Formulars. Erstellen Sie außerdem eine Funktion mit dem Namen
formular_zuruecksetzen
, die alle vom Formular übergebenen Werte leert, wenn die POST-Methode erfolgreich war. Zusätzlich muss das standardmäßige Abschicken des Formulars über Submit-Buttons (indem der Wert
false
zurückgegeben wird) abgebrochen werden können, wofür für das Formular mit der ID
neuer_lauefer
ein entsprechender
submit
-Listener eingerichtet wird.
    Probefahrt
    Das Aussehen der Seite hat sich durch den neuen Code nicht verändert. Dennoch sollten Sie die Datei meine_skripts.js um den gerade erstellten Code erweitern und dann die Seite index.html im Browser öffnen. Öffnen Sie hier den »Network«- (Chrome) bzw. den »Net«-Tab (Firebug). Wird der
sichern_button
angeklickt, sollte im Abschnitt Request Method des Headers -Tabs ein passender POST -Request angezeigt werden. Außerdem sollten