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

Anfragen mit $.getJSON()

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit .getJSON() setzen Sie eine Anfrage per GET ab, auf die der Server mit den Daten im JSON-Format antworten soll. Sehen Sie sich das am Beispiel an und nutzen dabei $.each, um das Objekt zu durchlaufen.

Transkript

Mit "getJSON()" setzen Sie eine Anfrage per .get() ab, auf die das Server mit den Daten im JSON-Format antworten soll. Wir wollen uns das praktisch anschauen anhand eines JSON-Dokuments, und wir wollen die Inhalte dann als Liste ausgeben lassen. Beginnen wir aber einmal ganz am Anfang, nämlich hier mit unserem JSON-Dokument. Das sieht so aus, dass wir hier immer Farbnamen und hexadezimal Werte haben. Dieses Dokument fordern wir an mit "$.getJSON". Hier ist der Name meiner Datei, und außerdem gebe ich eine Funktion an, was ich dann mit den Daten machen möchte, die ich erhalten möchte. Im Beispiel sollen diese Inhalte zu einer Liste werden. Was brauche ich dafür? Dafür ist "$.each()" nützlich. "$.each()" ist eine sogenannte Utility-Funktion in jQuery, und die ist sehr praktisch, um Objekte oder Arrays zu durchlaufen. Sie sehen hier ein Beispiel. Sie geben hinter "$.each()" das Objekt oder Array an, das Sie durchlaufen wollen, und dann eine Funktion, wo Sie zwei Parameter angeben, einen für den Index und einen für den Wert. Und dann können Sie innerhalb der Funktion auf die beiden zugreifen. Im Beispiel würde es ausgeben 0: 52, 1: 97 0 und 1 sind die Indizes dieser Array-Elemente. Kommen wir zurück zu unserem Beispiel. Ich habe hier ein leeres Array definiert, und zu diesem Array möchte ich jetzt die einzelnen Elemente anfügen. und zwar einzelne List-Items, also LI-Elemente. Dafür verwende ich "push()". Wenn Sie bei der Dokumentation von jQuery nach "push()" suchen, so werden Sie das nicht finden, weil es eine normale JavaScript Geschichte ist. Und was macht man mit "push()"? Mit "push()" kann man Elemente an ein Array anhängen. Hier sehen Sie ein Beispiel: ein Array mit zwei Elementen, und dann wird "push()" verwendet, um weitere Elemente zu ergänzen, und dann habe ich ein Array mit 4 Elementen. In unserem Beispiel verwenden wir "push()", um eben unser Array zu bestücken. Und was kommt darein, das LI, dann verwende ich eine ID, und als ID möchte ich immer den Index haben. Eine ID darf nicht mit einer Zahl beginnen, deswegen habe ich Nummer noch davor geschrieben. Und als Inhalt zwischen dem LI- Anfang und LI- Ende möchte ich meine eigentlichen Inhalte haben, das heißt, sowohl den "colorName" als auch den "hexValue", den "colorName" und den "hexValue". Danach habe ich also ein Array mit LI- Elementen, und damit das Korrektes hat im L-Wert, muss ich die LI-Elemente natürlich innerhalb eines UL-Elements schreiben. Schauen wir mal noch kurz an, wie das hier aussehen soll. Also, das sind die LI-Elemente, die ich einzeln erzeuge, und die müssen natürlich innerhalb eines UL-Elements stehen. Das erzeuge ich hier. Ich definiere außerdem noch eine Classe, damit ich es Beispielweise per ZSS formatieren kann, dann definiere ich den HTML-Inhalt für mein UL-Element. An dieser Stelle verwende ich mein Array, was ich erstellt habe. Das soll zu einem String werden, dafür benutze ich "join()", und bei "join()" kann ich danach angeben, durch was die Array-Elemente, wenn die zu einem String werden, getrennt werden sollen, und im Beispiel durch nichts. Und das Ganze hänge ich dann an Body an. Wenn Sie mehr zu "join()" wissen wollen, so finden Sie das wieder nicht bei jQuery, weil es eine JavaScript-Geschichte ist, aber Beispielweise hier. Da steht jetzt schon "Die join() Methode kombiniert alle Elemente von einem Array zu einem String." Damit sind wir durch den gesamten Code hier gegangen. Schauen wir uns noch mal das Ergebnis an. Das Ergebnis ist, wie gesagt hier, meine Liste, die erstellt wurde aus den JSON-Daten, die ich vom Server angefordert habe, und zum Einsatz kam hier "$.getJSON".

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!