JQuery liest XML-Dateien und zeigt sie an

Dieses Mal bringe ich Ihnen JQuery zum Lesen und Anzeigen von XML-Dateien. Was sind die Vorsichtsmaßnahmen für JQuery zum Lesen und Anzeigen von XML-Dateien? Hier ist ein praktischer Fall.

Vorbereitungsarbeiten

Bevor wir beginnen, müssen wir die folgenden Vorbereitungsarbeiten durchführen:
1. Erstellen Sie eine leere HTML-Datei mit dem Namen DEMO.html (Editplus). empfohlen Erstellen)
2. Vertraut mit der grundlegenden Syntax des JQuery-Frameworks (Es spielt keine Rolle, ob Sie es später im Detail erklären)
3. XML zum Speichern von Daten und die Struktur von XML. Es wird weiter unten behandelt. Sie können auch die von mir gepackte Datei herunterladen, um sie anzuzeigen.
4. Dieses Bild wird zur Anzeige im leeren HTML-Dokument verwendet Wartezeit für das Lesen des XML
Offiziell begonnen
Schritt 1: Schauen wir uns zunächst die einfache Struktur dieser Daten, Miniaturansichten und Buchbeschreibungsinformationen an
Das Folgende ist der XML-Dateicode:

<?xml version="1.0" encoding="utf-8" ?> 
<books> 
<book title="藏地密码" imageurl="images/Tibet_Code.jpg"> 
<description> 
这里是概况
</description> 
</book> 
<book title="剑桥雅思6" imageurl="images/ielts.jpg"> 
<description> 
这里是概况
</description> 
</book> 
<book title="Professional ASP.NET" imageurl="images/asp.jpg"> 
<description> 
这里是概况=
</description> 
</book> 
</books>

Zweitens schauen wir uns den JavaScript-Code an, der in das leere HTML-Dokument geladen ist:

$(document).ready(function() 
{ 
$.get('myData.xml', function(d){ 
$(&#39;body&#39;).append(&#39;<h1> Saturn给你推荐几本书： </h1>&#39;); 
$(&#39;body&#39;).append(&#39;<dl />&#39;); 
$(d).find(&#39;book&#39;).each(function(){ 
var $book = $(this); 
var title = $book.attr("title"); 
var description = $book.find(&#39;description&#39;).text(); 
var imageurl = $book.attr(&#39;imageurl&#39;); 
var html = &#39;<dt> <img class="bookImage" alt="" src="&#39; + imageurl + &#39;" /> </dt>&#39;; 
html += &#39;<dd> <span class="loadingPic" alt="Loading" />&#39;; 
html += &#39;<p class="title">&#39; + title + &#39;</p>&#39;; 
html += &#39;<p> &#39; + description + &#39;</p>&#39; ; 
html += &#39;</dd>&#39;; 
$(&#39;dl&#39;).append($(html)); 
$(&#39;.loadingPic&#39;).fadeOut(2000); 
}); 
}); 
});

Schritt 2: Hier werde ich nur über die Prinzipien und den Betriebsprozess von sprechen JavaScript-Code, aber wir werden nicht zu viel auf die Syntax eingehen. Wenn Sie Fragen zur Syntax haben, hinterlassen Sie mir bitte eine Nachricht oder schauen Sie sich die JQuery-bezogenen Dokumente an.
Zeile 1: Wenn das HTML-Dokument vorbereitet ist (d. h. sowohl HTML als auch JavaScript werden heruntergeladen), werden die Methode $(document).ready von JQuery und der darin enthaltene Prozess automatisch ausgelöst. Offensichtlich wird hier zuerst die Methode $.get ausgeführt.
Zeile 3: Der erste Parameter von $.get ist der relative Pfad der XML-Datei (beachten Sie, dass der Pfad korrekt eingegeben werden muss. Hier legen wir die XML- und Webseitendateien im selben Ordner ab). Der zweite Parameter ist eine Callback-Funktion, also Callback-Funktion . Das heißt, der Inhalt dieser XML-Datei wird über die get-Methode angefordert und dann werden die darin enthaltenen Daten über diese Rückruffunktion manipuliert. Der Parameter d des Rückrufs stellt alle vom XML-Rückruf zurückgegebenen Daten dar. Mit diesem Parameter d können wir mit dem folgenden Inhalt fortfahren.
Zeile 4: Fügen Sie über JavaScript dynamisch ein Tag

hinzu. Dies ist der Gesamttitel der Seite.
Zeile 5: Fügen Sie außerdem dynamisch ein Tag

hinzu ;dl> im BODY , der als Inhaltscontainer unter der enthaltenden Schleife verwendet wird. (Zeile 20 wird verwendet)
Zeile 7: Diese Zeile ist wichtig, da wir bereits gesagt haben, dass der Parameter d der Rückruffunktion alle Datenrückrufe aus dem XML darstellt. Jetzt müssen wir sie verarbeiten (Filterung) und Formatierung; bitte beachten Sie: Hier wird das Buch-Tag (Tag) durchsucht und dann die Funktion nach jedem in einer Schleife ausgeführt, bis die Dateneinträge in der XML vollständig durchlaufen sind (ein bisschen wie die Funktion von). foreach-Funktion in PHP)
Zeile 9: $(this) erstellt tatsächlich ein Objekt mit dem Zweck, das aktuelle Buchinformationsobjekt von d zu instanziieren, um die Operation zu erleichtern Zeile 10 – Zeile 12: Holen Sie sich den Buchnamen, die Beschreibung bzw. die Miniaturansicht des aktuellen Objekts $book (beachten Sie, dass die Syntax zum Abrufen von Attributwerten und Knotenwerten unterschiedlich ist) Zeile 14 – Zeile 18 : Buchinformationen für die Ausgabe formatieren;
Zeile 20: Die formatierten Informationen im HTML-Ausgabemodus in das Dokument ausgeben.
Zeile 22: Um dem Benutzer mitzuteilen, dass unsere aktuellen Informationen aus XML gelesen werden, wird das Bild nach 2000 Millisekunden (2 Sekunden) ausgeblendet.
Schritt 3: An diesem Punkt sind Sie fertig. Jeder kann mir gerne eine Nachricht hinterlassen, um die Entwicklung von JQuery und die auftretenden Probleme zu besprechen. Bitte geben Sie mir gerne Ratschläge. Bitte führen Sie den heruntergeladenen Ordner außerdem in einer WEB-Umgebung aus (IIS oder
Virtual Host
). Bitte klicken Sie nicht, um ihn direkt auszuführen.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Implementieren des Datei-Uploads mit Jquery+LigerUI

Detaillierte Erläuterung von jquery dynamisches Laden von JS-Dateien

Das obige ist der detaillierte Inhalt vonJQuery liest XML-Dateien und zeigt sie an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!