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

Daten anfordern mit $.get()

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
$.get() ist praktisch, um – wie der Name schon sagt – Dateien per GET anzufordern. Bei Bedarf können Sie auch Parameter übergeben und dann die empfangenen Daten ausgeben.

Transkript

Die globale Funktion jQuery.get() oder auch $.get() ist praktisch um Daten per GET zu übertragen. Bevor wir uns ansehen, wie das funktioniert, stellt sich die Frage: Was ist denn der Unterschied zwischen .get() und .post()? Wir haben nämlich hier auch jQuery.post(). Und das unterscheidet sich von .get() darin, dass die Abfrage per POST durchgeführt wird. .get() hingegen mit GET. Bei diesen Sachen handelt es sich um Arten, wie Daten Übertagen werden, vom Client zum Server. Und diese können sowohl per GET als auch per POST übertragen werden. Nehmen wir einmal ein Formular, dann können diese Formulardaten sowohl per GET als auch per POST übertragen werden. Ein Beispiel, wo üblicherweise GET zum Einsatz kommt, ist bei Suchmaschinen. Und Sie werden dann auch gleich sehen, wie das funktioniert. Jetzt schreib ich mal hier etwas hin, und sende das Formular ab. Und dann sehen Sie, hier oben steht der Begriff, den ich in das Suchfeld eingetragen habe. Das ist nämlich die Art, wie Daten per GET Übertagen werden. Die werden über die URL übertragen. Wenn man hingegen Daten per POST versendet, so ändert sich die URL hier oben nicht, und die Daten werden im Dokumentkörper versendet. Prinzipiell ist es so, GET ist geeignet für alle Arten von Suchanfragen. POST hingegen ist die richtige Wahl, wenn Sie beispielsweise die Daten aus einem Kontaktformular versenden wollen. So, schauen wir uns einmal an, wie GET funktioniert. Ich bin auf der Webseite der API Dokumentation. .get() ist eine verkürzte Schreibweise für $.ajax(). Es geht prinzipiell so, dass Sie bei .get() angeben die Datei, die Sie aufrufen wollen. Und dann schreiben Sie eine Funktion, die aufgerufen wird, wenn das Ganze erfolgreich ist. Und der Funktion übergeben Sie einen Parameter. Und darin stehen dann die Daten, die vom Server kommen. Sehen wir uns das mal praktisch an. Ich habe hier ein kleines Beispiel. Da gibt es einen und ein Element für die Ausgabe. Und wenn man auf den "Button" klickt, dann soll etwas geschehen. Im einfachsten Fall, wird einfach nur die Datei angefordert, wenn Sie nichts weiter angeben. Das ist aber natürlich ein bisschen langweilig, weil normalerweise möchte man auch Daten vom Server empfangen und weiter verarbeiten oder auch Daten zum Server schicken. Sehen wir uns mal ein weiteres Beispiel an. Das hier kommentiere ich einmal aus. Jetzt habe ich wieder $.get, gebe an, welches Dokument ich aufrufen möchte, und habe hier ein Objekt mit Inhalten, die ich an den Server versende, immer so in Schlüssel-Wertpaare aufgeteilt. Auch schon ganz schön. Aber im Normalfall möchte man natürlich dann auch Informationen vom Server erhalten, und das schauen wir uns jetzt im nächsten Fall einmal an. Und hier, das kommentiere ich auch aus. Also wieder $.get. Ich gebe die Datei an, ich übergebe Daten, die an Server gesendet werden sollen, an das angegebene Dokument. Und außerdem habe ich jetzt eine Funktion geschrieben, die aufgerufen wird, wenn das Ganze klappt. Und wenn das der Fall ist, dann schreibe ich in mein Element "#ausgabe" die empfangenen Daten. Also "data" hier und "data" hier. Gilt hier natürlich die Frage: Was macht denn eigentlich mein Dokument "beispiel.php"? Das ist in diesem Fall ganz einfach. Es gibt nur die Meldung aus vom Server. Und mit print_r() lasse ich dann alle übergebenen Sachen anzeigen. Sehen wir uns das dann einmal im Browser an. So, jetzt gehe ich auf "Bitte klicken", und Sie sehen, die Daten werden vom Server empfangen, und es werden die Daten, die ich angegeben habe, hier auch wieder ausgegeben. Jetzt gibt es einen wichtigen Punkt bei .get(). .get() implementiert nämlich das "Promise Interface", und damit stehen alle Methoden und Eigenschaften zur Verfügung, die auch ein "Promise", ein Versprechen bietet. Und das sieht folgendermaßen aus. Dass ich zum Beispiel .done() habe, für den Erfolgsfall, .fail(), wenn es nicht geklappt hat und .always() wird immer aufgerufen. Und das Praktische daran ist, dass Sie mehrere von .done(), .fail(), .always() nutzen können. Hier zum Beispiel, in dem Beispiel, wird danach noch einmal .always() aufgerufen und das funktioniert. Sehen wir uns das auch ein Mal am Beispiel an. Hier haben wir wieder unseren "button" und unsere "#ausgabe", und wir lassen jetzt "Erfolg" ausgeben, wenn es klappt. Dann haben wir die verschiedenen Methoden des "Promise Interfaces", .done(), .fail() und .always(). Und wir hängen immer passende Meldungen an mit .append(). Also hier "Zweites Mal Erfolg". Bei .fail() hingegen "Fehler" und bei .always() "beendet". Und dann könnte natürlich beliebiger, anderer Code kommen, und wir können noch ein Mal .always() beispielsweise aufrufen, und lassen uns in diesem Fall ausgeben "Noch mal beendet". Sehen wir uns das an, im Browser. Ich klicke auf den "button", und es kommen alle Meldungen, also "Erfolg Zweites Mal Erfolg beendet Noch mal beendet". Jetzt möchte ich einmal zeigen, was passiert, wenn hier ein Fehler ist und ich ändere einmal die Datei. "beispiel1.php" gibt es nicht. Das heißt, es ist ein Fall von .fail(). Sehen wir uns das jetzt einmal an. Und dann sehen wir: "Fehler beendet Noch mal beendet". Alles Andere klappt dann wie vorher auch, aber es wird eben diese bei .fail() angegebene Meldung ausgegeben. Hier sehen Sie noch ein Mal das Wichtigste zu $.get() zusammengefasst. Also, Sie geben da die URL an um externe Ressourcen zu holen. Sie können dann auch Daten übergeben. Und als Drittes können Sie noch eine Funktion angeben, die beispielsweise hier in diesem Fall die erhaltenen Daten dann auch anzeigt.

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)
Liste erzeugen
Meike H.

Hallo, ich verstehe nicht, warum das Schließ-Tag /ul verwendet wird, um die li's zu umhüllen. Viele Grüße Meike

 

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!