Kurzer Tipp: Nutzen Sie die Leistungsfähigkeit von jQuery, um Daten aus XML-Dateien zu extrahieren

In diesem kurzen Tipp zeige ich Ihnen, wie Sie Daten aus einer XML-Datei auf eine leere Seite laden. Wir werden die Funktion $.get verwenden und das Laden des GIF beim Abrufen der Informationen implementieren. Wir präsentieren eine einfache Liste empfohlener Webentwicklungsbücher. Fangen wir an.

Schritt 1: Überprüfen Sie das Skript

Schauen wir uns zunächst eine einfache XML-Datei an. Es enthält nur wenige Bücher mit ihren Titeln, Bildern und Beschreibungen.

<?xml version="1.0" encoding="utf-8" ?>
<books>
    <book title="CSS Mastery" imageurl="images/css.jpg">
    <description>
    info goes here.
    </description>
    </book>

    <book title="Professional ASP.NET" imageurl="images/asp.jpg">
    <description>
    info goes here.
    </description>
    </book>

    <book title="Learning jQuery" imageurl="images/lj.jpg">
    <description>
    info goes here.
    </description>
    </book>
</books>

Schauen wir uns als Nächstes jQuery in Aktion an.

    $(document).ready(function()
      {
        $.get('myData.xml', function(d){
        $('body').append('<h1> Recommended Web Development Books </h1>');
        $('body').append('<dl />');

        $(d).find('book').each(function(){

            var $book = $(this); 
            var title = $book.attr("title");
            var description = $book.find('description').text();
            var imageurl = $book.attr('imageurl');

            var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
            html += '<dd> <span class="loadingPic" alt="Kurzer Tipp: Nutzen Sie die Leistungsfähigkeit von jQuery, um Daten aus XML-Dateien zu extrahieren" />';
            html += '<p class="title">' + title + '</p>';
            html += '<p> ' + description + '</p>' ;
            html += '</dd>';

            $('dl').append($(html));
            
            $('.loadingPic').fadeOut(1400);
        });
    });
});

Schritt 2: Entschlüsseln Sie die Zeit

Da dies ein kurzer Tipp ist, führe ich das Skript schneller als gewöhnlich aus. Wenn das Dokument zur Bearbeitung bereit ist, erhalten wir die XML-Datei mit der Funktion „$.get“. In Klammern übergeben wir den Speicherort der Datei und führen dann die Rückruffunktion aus. Ich werde die Variable „d“ verwenden, um die aus der XML-Datei extrahierten Informationen darzustellen. Als Nächstes erstellen wir ein Titel-Tag und eine Definitionsliste.

Anschließend durchsuchen wir die XML-Datei (d) und finden das Tag mit dem Titel „book“. Wenn ich mir meine Akten noch einmal ansehe, sind es insgesamt drei Bücher. Daher müssen wir die Methode „each“ ausführen, um Vorgänge für jedes Buch auszuführen. Denken Sie daran, „jedes“ ist wie eine „Für“-Aussage. Dies ist eine Möglichkeit, jedes Element in einer gepackten Menge zu durchlaufen.

Im nächsten Codeblock definiere ich einige Variablen. Um den „Titel“ und die „Beschreibung“ aus der XML-Datei zu erhalten, verwenden wir „.attr(value)“ – wobei „value“ dem Attribut innerhalb des Tags entspricht.

Schließlich erstellen wir eine Variable namens „html“, die den HTML-Code enthält, der die Informationen aus der XML-Datei anzeigt. Wenn Sie diese Informationen jedoch einfach einer Variablen zuweisen, werden sie nicht auf der Seite angezeigt. Um es der Seite hinzuzufügen, rufen wir die Liste der Definitionen ab und hängen die Variablen an. - $('dl').append($(html));

Erwähnenswert ist außerdem, dass wir beim Abrufen von Informationen aus der XML-Datei ein Standard-GIF zum Laden anzeigen (über ein Hintergrundbild). Sobald die Daten geladen sind, greifen wir auf das Bild zu und blenden es aus.

Du bist fertig

Ich weiß, dass ich das sehr schnell durchgearbeitet habe. Sie können also gerne einen Kommentar abgeben und Ihre Fragen stellen. Es sollte beachtet werden, dass dieses Skript noch viel mehr Arbeit erfordert, bevor es für eine reale Website bereit ist. Sie müssen diejenigen entschädigen, die Javascript deaktiviert haben. Wenn sie es in diesem Fall ausschalten, starren sie auf eine leere Seite. Diese Dinge muss man kompensieren. Aber ich schweife ab.

Das obige ist der detaillierte Inhalt vonKurzer Tipp: Nutzen Sie die Leistungsfähigkeit von jQuery, um Daten aus XML-Dateien zu extrahieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!