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

HTML mit load() laden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit der Methode .load() lassen sich HTML-Teile ganz einfach direkt an die gewünschte Stelle laden. Sehen Sie sich hier ein Beispiel an, bei dem Sie per Klick auf ein Bild jeweils die passenden Informationen laden.

Transkript

Wenn Sie HTML-Code in Ihr Dokument laden wollen, so ist .load() das Richtige. Im Gegensatz zu den globalen Funktionen, die es sonst für Ajax gibt, ist das eine Methode, vor der nicht $ oder jQuery steht, sondern der Selektor, in den der neue Inhalt geladen werden soll. Wie kann das aussehen? Also, beispielsweise habe ich ein Element mit der id="#result", und in dieses möchte ich jetzt den Inhalt aus "ajax/test.html" laden. Das heißt, hinter ".load" gebe ich dann, welches Dokument geladen werden soll. In diesem Beispiel wird das vollständige Dokument geladen. Jetzt kann es auch sein, dass Sie nur einen Ausschnitt laden wollen. Dafür geben dann, einen Selektor an, wie in diesem Beispiel. Dann wird nur der Inhalt des Elements, mit der id="#container" geladen. Außerdem können Sie noch eine Funktion bestimmen, die aufgerufen wird, wenn das Ganze geklappt hat. Sehen wir uns ein Beispiel an, wie das funktioniert. Ich habe ein Dokument mit mehreren Bildern, und wenn ich auf eines dieser Bilder klicke, soll immer ein HTML-Inhalt mit Informationen zu dem Bild geladen werden. Und dieser Inhalt stammt aus externen Dateien. Sehen wir uns das einmal praktisch an, und beginnen erst einmal mit dem HTML-Code. Wir haben ein div-Element mit der class="Blumen", und in diesem gibt es drei Links. Bei "href" ist immer der Pfad zu einem Dokument angegeben. Und hier stehen auch die Bilder. Wenn ich das jetzt ohne Ajax aufrufen würde, dann würde durch einen Klick auf den Link dieses Dokument wirklich aufgerufen. Wie sieht dieses Dokument aus? Das ist jetzt HTML-Code mit Informationen zur Pflanze. Jetzt wollen wir den Inhalt in dem Dokument selber, anzeigen lassen. Und dafür habe ich ein div-Element vorbereitet, Mt der class="Details". Schauen wir uns das dann einmal an. Erst einmal muss ich natürlich die Links auswählen. Es sind Links innerhalb eines Elements mit der class="Blumen", und ich reagiere jetzt auf das Klick-Ereignis. Und das, was dann geschehen soll, wenn der Benutzer auf den Link klickt, steht innerhalb der Funktion. Als Erstes unterbinde ich die Standardaction. Und standardmäßig ist es ja bei Links so, wenn Sie auf einen Link klicken, wird das Dokument aufgerufen. Das möchte ich hier nicht. Und das verhindere ich mit "preventDefault()" Als nächstes, um dann "load" aufzurufen, brauche ich natürlich die URL. Und die URL steht ja immer hier drinnen. Das heißt, die kann ich auslesen, indem ich das aktuell angeklickte Element auswähle, auf das Attribut mit dem Namen "href" zugreife, und dieses dann, in der Variable "url" speichere. Und damit lade ich immer das bei dem href-Attribut angegebene Dokument in mein Element, mit der class=".details". Im Beispiel sind das immer vollständige Dokumente, die geladen werden. Jetzt könnte es aber natürlich auch folgenden Fall geben. Ich habe hier ein weiteres Dokument, und das beinhaltet jetzt die Informationen zu allen Blumen. Immer innerhalb von div-Elementen mit passenden IDs. Sehen wir uns an, wie wir mit .load() Dokumentausschnitte laden können. Oben sieht es ganz ähnlich aus, wie eben auch. Ich habe mein div-Element, und da sind meine Links. Hier bei den Links, gebe ich jetzt den Pfad zu meinem Blumendokument an, und habe hier auch einen Anker definiert. Außerdem habe ich einen Alt-Text, der genauso lautet, wie der Anker von dem Bild. Aber der Anker ist kleingeschrieben, und der Alt-Text ist großgeschrieben. So, wie funktioniert das Ganze? Erst einmal: Wir wählen die "a"-Elemente innerhalb der ".blumen" aus. Wir reagieren auf das Klick-Ereignis. Wir unterbinden die Standardaction, dann definiere ich die URL. Und jetzt muss ich natürlich zur URL noch den passenden Selektor angeben, weil es soll ja immer nur ein Dokumentausschnitt angezeigt werden. Und dafür gehe ich von meinem gerade angeklickten Link, zu dem Bild-Element. Dass heißt, ich schreibe: find("img"), wähle dort das Attribut mit dem Namen "alt" aus. Das ist hier der alternative-Text. Und den muss ich jetzt in Kleinbuchstaben verwandeln. Damit habe ich den Selektor gewonnen, den ich hier angeben kann. Wenn wir uns das Dokument hier ansehen, dann sieht es genauso aus, wie eben auch. Aber dieses Mal lade ich nur Ausschnitte aus dem HTML-Dokument. Sie haben kennengelernt in diesem Film, die .load()-Methode aus jQuery. Dieses ungeheuer praktisch, wenn Sie HTML-Code laden wollen. Und Sie können sie auch verwenden, wenn Sie nur Ausschnitte aus HTML-Dokumenten laden wollen.

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!