Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript Grundkurs

Ein Formular mit AJAX verschicken

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Film vermittelt, wie Sie Benutzereingaben in einem Webformular mit AJAX verschicken können. Dabei ist es wichtig, dass das normale Verschicken der Formulardaten über das klassische Submit verhindert wird.
06:50

Transkript

Ich zeige Ihnen nun wie Sie Formulare per Ajax an den Server schicken können und dabei vorher bereits eine vernünftige Plausibilisierung der Daten vornehmen, damit Sie nicht überflüssig die Daten hin und her schicken. Zu dem werde ich nach erfolgreicher Anmeldung die Seite so verändern, dass die Anmeldefelder deaktiviert sind, so würde das aussehen. Ich trage mich hier ein mit meiner User ID und ohne Passwort, ich klicke auf Daten wegschicken und diese Daten sind nicht korrekt, also kommt eine entsprechende Fehlermeldung. Ich trage wieder einen zu kurzen Namen für die User ID ein, fülle aber das Passwort, auch das akzeptiert er nicht. Ich Klicke zurücksetzen an, wenn ich das abbreche passiert gar nichts und wenn ich auf okay gehe wird das Formular in den Grundzustand zurückgesetzt und die Fehlermeldungen verschwinden. Jetzt trage ich die korrekten Daten ein, soweit Sie auf der Client Seite korrekt Seiten können, das muss natürlich auf der Serverseite noch gegenüber einer korrekten Kombination aus User ID und Passwort verifiziert werden, aber das ist dann eben der Schritt der auf Serverseiten läuft. Iich klicke auf Daten wegschicken und Sie können hier erkennen, dass eine AJAX-Anfrage zum Server geschickt wurde. Das ist meine Antwort von der Serverseite, einfach Anzeige der Daten, aber Sie sehen, dass jetzt diese Eingabefelder deaktiviert sind und hier plötzlich ein Button Log out steht, statt den bisherigen beiden Button zum anmelden, beziehungsweise wegschicken der Daten und zum Zurücksetzen des Formulars. Natürlich werden Sie in der Praxis hier noch ganz andere Änderung vornehmen, aber das ist vom Schema her alles vorhanden, was man so braucht. Das ist der Quellcode von meiner Webseite. Sie sehen hier, dass ich eine Stylesheet Datei einbinde, womit ich die Geschaltung des Formulars vornehme, die Erzeugung von dem XHR Objekt über die erste Skriptdatei und hier eine zweite Skriptdatei, wo die Plausibilisierung des Formulars als auch das Verschicken entgegen dem der Daten per Ajax programmiert ist. Ansonsten sehen Sie die zwei Eingabefelder und drei Schaltflächen, drei wohlgemerkt. Im quasi angemeldeten Zustand sehen Sie aber nur eine und den Zustand vor der Anmeldung zwei. Der Trick beruht einfach darauf, dass ich vor einer Anmeldung die dritte Schaltfläche mit Stylesheets unsichtbar mache, Display none und nach einer simulierten Anmeldung, die dritte Schaltfläche mit DHTML auf sichtbar setze, also die Displayeigenschaft manipuliere und die ersten beiden Schaltflächen ebenfalls mit DHTML über das Styleobjekt auf Display none setze und das ist jetzt unsere JavaScript-Datei. Ich erzeuge also wieder ein XHR Objekt und das ist die Methode send request. Interessant hier ist, wie diese Parameter, diese Werte, die ich an den Server schicken möchte, zusammengesetzt werden. Ich nehme den Schlüssel, ein Gleichheitszeichen und mach dann eine String Verkettung mit dem Wert in dem ersten Eingabefeld über getElementByID.Value und wieder ein Plus, dann das kaufmänische und, und der Schlüssel für das zweite Feld mit einem Gleichheitszeichen und wieder mit getElementByID. Value, dann eben dem Wert im zweiten Eingabefeld und dann wird ganz klassisch mit Ajax an dieses besagte Skript eine Übergabe erfolgen und die Funktion handle response, nimmt Kandidaten entgegen und zeigt sie an. Alle weiteren Schritte die hier laufen, sind entweder Manipulationen eines Formularelementes, beispielsweise, dass der Value hier auf play gesetzt wird, oder dass die Eigenschaft disabled auf true gesetzt wird, also ist nicht mehr aktivierbar, oder aber eine Manipulation eines Elements bezüglich seiner Stylesheet Eigenschaft über das Style Objekt. Hier setze die Hintergrundfarbe und hier sehen Sie beispielsweise das zwei Schaltflächen; Logout und Frage sind IDs bezüglich der Display Eigenschaft verändert werden, wenn jetzt ein Anwender die Daten wegschicken möchte, wird nicht direkt die Funktionen send request aufgerufen, sondern die Funktion Plausi und diese durchläuft zuerst gewisse Plausibilisierungsschritte und schickt nur dann die Daten per Ajax weg, wenn keine Fehler auftreten, wenn also alle Bedingungen zum Verschicken erfüllt sind. Das ist wie bei der klassischen Versendung von Formulardaten. Das heißt also, ich mache hier gewisse Kontrollen, ob das Passwort gefüllt ist, ob die User ID nicht zu wenig Zeichen enthält und setzte im Fehlerfall eine Variable auf true, die ich hier Fehler nenne und nur wenn diese nicht true ist, dann schicke ich die Daten mit Send request weg. Beachten Sie, dass im Fall von der Datenverwendung per Ajax nirgendswo die Action Eigenschaft des Formulars spezifiziert ist . Sie darf oder sollte auf keinen Fall spezifiziert werden und auch nirgendswo ein submit Vorgang stattfindet, denn das würde dazu führen, dass eine neue Seite im Browser geladen wird, dasdie Daten verschickt werden und es wird eine neue Seite angefordert, also müssen Sie auf jeden Fall verhindern, dass Submit ausgelöst wird. Zum einen sehen Sie, dass hier weder Action noch Method in HTML spezifiziertes und auch nirgendswo ein submit Button zu finden ist, auch nicht eine Schaltfläche im Formular, die vom Browser dann, ohne das Sie es kontrollieren können, plözlich zu einem submit Button umgewandelt wird. Der Buttom steht bewusst außerhalb des Formulars und es wird auch vermieden, dass für das Formularobjekt irgendwo Werte für Action spezifiziert wurden als auch irgendwo sie submit Methode aufgerufen wird, dann sind Sie auf der sicheren Seite und können wie beschrieben, wie gesehen, die Daten quasi wie beim konventionellen Formular zum Server schicken, nur mit dem Vorteil eben, dass keine neue Webseite geladen wird und Sie mit normalen DHTML Mitteln die Inhalte anzeigen können, die Seite verändern können oder was auch immer Sie dann tun wollen.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!