In diesem kurzen Tipp zeige ich Ihnen, wie Sie Daten aus einer XML-Datei auf eine leere Seite laden. Wir arbeiten mit der $ .get-Funktion und implementieren auch ein Ladegif, während die Informationen abgerufen werden. Es wird eine einfache Liste mit empfohlenen Webentwicklungsbüchern angezeigt. Lasst uns weitermachen und loslegen.

Erster Schritt: Überprüfen Sie das Skript

Schauen wir uns zuerst unsere einfache XML-Datei an. Es enthält lediglich einige Bücher mit Titel, Bild und Beschreibung.

    Info geht hier.     Info geht hier.     Info geht hier.    

Als Nächstes wollen wir uns die jQuery ansehen.

 $ (document) .ready (function () $ .get ('myData.xml', Funktion (d) $ ('body'). append (')
 Empfohlene Webentwicklungsbücher 
'); $ ('body'). anhängen ('
'); $ (d) .find ('book'). Jede (Funktion () var $ book = $ (this); var title = $ book.attr ("title"); var description = $ book.find ('description.) ') .text (); var imageurl = $ book.attr (' imageurl '); var html ='
  
'; html + = '
 '; html + = '
'+ title +'
'; html + = '
 '+ description +'
'; html + = '
'; $ ('dl'). anhängen ($ (html)); $ ('. loadingPic'). fadeOut (1400); ); ); );

Zweiter Schritt: Zeit entschlüsseln

Da dies ein schneller Tipp ist, gehe ich das Skript etwas schneller durch, als es normalerweise der Fall wäre. Wenn das Dokument zur Bearbeitung bereit ist, rufen wir unsere XML-Datei mit der Funktion "$ .get" ab. In der Klammer übergeben wir den Speicherort der Datei und führen dann eine Rückruffunktion aus. Ich verwende die Variable "d", um die Informationen darzustellen, die aus der XML-Datei abgerufen wurden. Als Nächstes erstellen wir ein Überschrift-Tag und eine Definitionsliste.

Weiter geht es durch die XML-Datei (d) und das Tag mit dem Titel "book". In Bezug auf mein Dokument gibt es drei Bücher. Daher müssen wir die Methode "each" ausführen, um für jedes Buch eine Operation durchzuführen. Denken Sie daran, dass "jeder" genau wie die "for" -Anweisungen ist. Es ist eine Möglichkeit, jedes Element im umhüllten Satz durchzugehen.

Im nächsten Codeblock definiere ich einige Variablen. Um "title" und "description" aus unserer XML-Datei zu erhalten, verwenden wir ".attr (value)" - wobei "value" dem Attribut innerhalb des Tags entspricht.

Zuletzt erstellen wir eine Variable namens "html", die die HTML-Datei enthält, in der die Informationen aus unserer XML-Datei angezeigt werden. Wenn Sie diese Informationen lediglich der Variablen zuweisen, wird sie nicht auf der Seite angezeigt. Um es zur Seite hinzuzufügen, greifen wir die Definitionsliste auf und hängen die Variable an. - $ ('dl'). anhängen ($ (html));

Erwähnenswert ist noch, dass, während die Informationen aus der XML-Datei abgerufen werden, ein Standard-Ladegif angezeigt wird (über ein Hintergrundbild). Wenn die Daten geladen sind, greifen wir das Bild und blenden es aus.

Sie sind fertig

Ich weiß, dass ich das etwas schnell durchgemacht habe. Fühlen Sie sich frei, einen Kommentar zu hinterlassen und Ihre Fragen zu stellen. Es sollte beachtet werden, dass dieses Skript ein wenig mehr Arbeit erfordert, bevor es für eine reale Website bereit ist. Sie müssen die Personen entschädigen, die Javascript deaktiviert haben. In diesem Fall würden sie auf eine leere Seite starren. Sie müssen solche Dinge kompensieren. Aber ich schweife ab.