German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)
In diesem kurzen Tipp zeige ich Ihnen, wie Sie Daten aus einer XML-Datei auf eine leere Seite laden. Wir werden mit der $.get-Funktion arbeiten und auch ein Lade-GIF implementieren, während die Informationen abgerufen werden. Wir zeigen eine einfache Liste empfohlener Webentwicklungsbücher an. Lassen Sie uns weitermachen und loslegen.
Erster Schritt: Überprüfen Sie das Skript
Schauen wir uns zunächst unsere einfache XML-Datei an. Es enthält lediglich einige Bücher mit Titel, Bild und Beschreibung.
1 |
<?xml version="1.0" encoding="utf-8" ?> |
2 |
<books> |
3 |
<book title="CSS Mastery" imageurl="images/css.jpg"> |
4 |
<description> |
5 |
info goes here. |
6 |
</description> |
7 |
</book> |
8 |
|
9 |
<book title="Professional ASP.NET" imageurl="images/asp.jpg"> |
10 |
<description> |
11 |
info goes here. |
12 |
</description> |
13 |
</book> |
14 |
|
15 |
<book title="Learning jQuery" imageurl="images/lj.jpg"> |
16 |
<description> |
17 |
info goes here. |
18 |
</description> |
19 |
</book> |
20 |
</books> |
Schauen wir uns als nächstes die aktuelle jQuery an.
1 |
$(document).ready(function() |
2 |
{
|
3 |
$.get('myData.xml', function(d){ |
4 |
$('body').append('<h1> Recommended Web Development Books </h1>'); |
5 |
$('body').append('<dl />'); |
6 |
|
7 |
$(d).find('book').each(function(){ |
8 |
|
9 |
var $book = $(this); |
10 |
var title = $book.attr("title"); |
11 |
var description = $book.find('description').text(); |
12 |
var imageurl = $book.attr('imageurl'); |
13 |
|
14 |
var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>'; |
15 |
html += '<dd> <span class="loadingPic" alt="Loading" />'; |
16 |
html += '<p class="title">' + title + '</p>'; |
17 |
html += '<p> ' + description + '</p>' ; |
18 |
html += '</dd>'; |
19 |
|
20 |
$('dl').append($(html)); |
21 |
|
22 |
$('.loadingPic').fadeOut(1400); |
23 |
});
|
24 |
});
|
25 |
});
|
Schritt zwei: Entschlüsselungszeit
Da dies ein kurzer Tipp ist, werde ich das Skript etwas schneller durchgehen als normalerweise. Wenn das Dokument bearbeitet werden kann, 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 werde die Variable "d" verwenden, um die Informationen darzustellen, die aus der XML-Datei abgerufen wurden. Als Nächstes erstellen wir ein Überschriften-Tag und eine Definitionsliste.
Weiter werden wir die XML-Datei (d) durchsuchen und das Tag mit dem Titel "book" finden. Unter Bezugnahme auf mein Dokument gibt es drei Bücher. Folglich müssen wir die Methode "each" ausführen, um eine Operation für jedes Buch auszuführen. Denken Sie daran, "jeder" ist genau wie die "for"-Anweisungen. Es ist eine Möglichkeit, jedes Element in der verpackten Menge durchzugehen.
Im nächsten Codeblock definiere ich einige Variablen. Um den "Titel" und die "Beschreibung" 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 den HTML-Code enthält, der die Informationen aus unserer XML-Datei anzeigt. Das bloße Zuweisen dieser Informationen zur Variablen wird jedoch nicht auf der Seite angezeigt. Um es der Seite hinzuzufügen, greifen wir auf die Definitionsliste zu und hängen die Variable an. - $('dl').append($(html));
Eine weitere erwähnenswerte Sache ist, dass während die Informationen aus der XML-Datei abgerufen werden, ein Standard-Lade-GIF angezeigt wird (über ein Hintergrundbild). Wenn die Daten geladen wurden, greifen wir auf das Bild zu und blenden es aus.
Du bist fertig
Ich weiß, dass ich das etwas schnell durchgemacht habe; Fühlen Sie sich also frei, einen Kommentar zu hinterlassen und Fragen zu stellen, die Sie möglicherweise haben. Es sollte beachtet werden, dass dieses Skript etwas mehr Arbeit erfordert, bevor es für eine reale Website bereit ist. Sie müssen Personen kompensieren, bei denen Javascript deaktiviert ist. In diesem Fall würden sie, wenn sie es ausgeschaltet hätten, auf eine leere Seite starren. Sie müssen solche Dinge kompensieren. Aber ich schweife ab.
