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.

jQuery: AJAX-Lösungen

Formulare mit $.post()

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Klassische Formulare zur Kontaktaufnahme oder für Kommentare versendet man üblicherweise per POST. Und wenn Sie AJAX einsetzen, können Sie dem Benutzer nach dem Absenden sogar Feedback geben, ohne dass die Seite neu geladen werden muss.

Transkript

jQuery.post() funktioniert im Prinzip wie jquery.get(), nur dass die Daten per POST übertragen werden. POST kommt bei den meisten Formularen zum Einsatz, beispielsweise bei Kontaktformularen, Kommentarformularen und ähnlichem. Wenn Sie die Formulardaten per Ajax übertragen, hat das den Vorteil, dass sie Seite nicht verschwindet, nachdem das Formular abgesendet wird. Schauen wir uns erst einmal ein kleines Beispiel dazu an, bevor zu einem Formular kommen. Ich habe einen und ein Ausgabe-Element. Wenn auf den "button" geklickt wird, soll die Datei "beispiel_post.php" aufgerufen werden. Das ist diese Datei hier. Im Beispiel macht die nichts anderes als einen Text auszugeben und außerdem, die übertragenen Daten. Dann gebe ich an irgendwelche Daten, die übertragen werden sollen, und ich schreibe eine weitere Funktion, und in dieser Funktion nehme ich dann die Daten, die wieder von Server kommen an, und schreibe sie in das Element mit der ID="#ausgabe". Das funktioniert genauso, wie wenn man das mit GET macht, der einzige Unterschied ist .post() hier. Und natürlich muss das Skript, das die Verarbeitung macht, auch mit POST-Daten umgehen können. Das kann es im Beispiel. Sehen wir uns das dann einmal im Browser an. Hier haben wir das Beispiel. Ich klicke, die Daten werden übertragen und wieder empfangen und hier dann ausgegeben in dieser Form. Wenn wir das selbe Beispiel mit GET machen, dann sieht das erst einmal ganz identisch aus. Einen Unterschied sieht man jetzt in den Entwicklertools. Ich gehe einmal auf "Netzwerkanalyse", lade die Seite neu, klicke hier drauf. Und Sie sehen, die Daten werden, wenn man mit GET arbeitet, hier drangehängt. Wenn man das mit POST macht hingegen, "Netzwerkanalyse" "laden", dann sind die Daten nicht hier angefügt, sondern die sind versteckt im Dokumentkörper, und Sie sehen hier auch, dass die Übertragungsmethode POST ist. Sehen wir uns nun ein Beispiel an, wo POST bei einem Formular benutzt wird. Dafür brauche ich natürlich erst einmal ein Formular. Hier ist mein Formular. Ich habe ein Formular mit zwei Feldern. Das eine Feld ist für den Vornamen gedacht, das andere, für den Nachnamen. Und außerdem gibt es einen Absende-Button. Wohin sollen die Daten geschickt werden, das steht bei "action". Die sollen an eine Datei="eintragen.php" gesendet werden. Was macht man üblicherweise mit solchen Daten, die aus einem Formular kommen? Ja, man kann sie beispielsweise in eine Datenbank schreiben oder man kann sie per E-Mail versendet. Das sind dann alles Sachen die auf dem Server statt finden müssen, beispielsweise in einem PHP-Script. In unserem Fall ist das PHP-Script einfacher gehalten, und es gibt einfach die eingetragenen Daten wieder aus. Ansonsten müsste hier, an dieser Stelle, etwa die Mail-Funktion verwendet werden, um die Daten irgendwo hinzusenden. So, schauen wir uns dann an, wie das Ganze funktioniert. Ich wähle mein Formular aus. Das hat eine ID bekommen "meinformular", und darüber kann ich das gut ansprechen. Welches Ereignis möchte ich nun abfangen? Ich möchte das "submit"-Ereignis abfangen. Und was dann geschehen soll steht in der Funktion. Zuerst einmal muss ich die Standardaktion unterbinden. Normalerweise würden die Formulardaten ja jetzt versendet werden, und das soll nicht geschehen, weil ich möchte mich selbst darum kümmern. Als nächstes erstelle ich mir Variablen, zum Einen für das Formular, da spreche ich das Element selbst an, und außerdem brauche ich die URL, wo die Daten hin gesendet werden sollen. Und dafür lese ich das "action"-Attribut aus. Das ist dieses hier. Und das speichere ich in der Variable "url". Jetzt brauche ich noch die Daten die versendet werden sollen. Da habe ich zum Einem den Vornamen. Den kann ich auslesen, indem ich das Element anspreche und .val() verwende. Genauso auch beim Nachnamen. Das brauche ich für .post(). Ich gebe zuerst die URL an. Die ist hier definiert. Und dann die Daten die versendet werden sollen. Und wenn das Ganze dann geklappt hat, möchte ich die Daten entgegen nehmen. Und ich könnte die jetzt in einem eigenen Element ausgeben lassen aber im Beispiel möchte ich, dass die Daten die vom Server empfangen werden anstelle des Formulars stehen. Deswegen wähle ich den ".container" aus. Das "Container"-Element ist ein Element was mein Formular umfasst. Und schreibe da die Daten, die von Server kommen, hinein. Sehen wir uns das dann einmal an. So, ich trage jetzt Vorname und Nachname ein und gehe auf "Absenden". Und Sie sehen, das Formular ist verschwunden. Und es kommen die Daten die ich eingetragen habe. Im echten Einsatz würde man wahrscheinlich nur eine Meldung ausgeben lassen, wie "Vielen Dank", und nicht unbedingt noch ein Mal anzeigen lassen, was eingetragen wurde. Aber in unserem Beispiel ist es gut um zu kontrollieren, ob alles wirklich geklappt hat. Jetzt hatten wir hier die Formulardaten so einzeln ausgewählt, indem wir immer den Wert hier ausgelesen hatten. Wir können stattdessen auch .serialize() verwenden. Schauen wir uns das einmal an. Das ist dieses Beispiel hier. Da verwende ich wieder die URL, und ganz einfach spreche ich mein Formular an, und gebe .serialize() an. Und dann werden die Formulardaten serializiert, so dass ich sie direkt weiter versenden kann. Wenn ich das Beispiel aufrufe, dann macht es das selbe, wie eben auch. Also, hier trage ich was ein, und gehe dann auf "Absenden" und es klappt. Aber mit .serialize() ist es natürlich schöner und kürzer. Sie haben gesehen, wie man POST verwendet. Es funktioniert im Prinzip genauso wie GET. Man verwendet es gerne bei Formularen. Und sehr praktisch ist es, dass Sie die Formulardaten mit .serialize() behandeln können um sie zu versenden. Und wenn Sie wollen, dass dann das Formular verschwindet, dann können Sie einen neuen Inhalt in das umfassende Element des Formulars schreiben.

jQuery: AJAX-Lösungen

Lernen Sie die Vorteile von Ajax bei der Webseitenerstellung kennen und nutzen Sie die verschiedenen Austauschformate in Ihren Projekten.

1 Std. 34 min (20 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!