JQuery lit et affiche les fichiers XML

Cette fois, je vais vous présenter JQuery pour lire et afficher les fichiers XML. Quelles sont les précautions pour que JQuery lise et affiche les fichiers XML. Voici un cas pratique, jetons un coup d'œil.

Travail de préparation

Avant de commencer, nous devons effectuer le travail de préparation suivant :
1. Créez un fichier html vierge nommé DEMO.html (Editplus est ; Créer recommandé)
2. Familier avec la syntaxe de base du framework JQuery ; (Peu importe si vous n'êtes pas familier, je l'expliquerai en détail plus tard)
3. Créez un fichier XML nommé data. xml pour stocker les données et la structure de XML Cela sera abordé ci-dessous, vous pouvez également télécharger le fichier que j'ai emballé pour afficher
4 Une image chargement.gif, cette image est utilisée pour afficher dans le document html vierge pendant le ; temps d'attente pour la lecture du XML
Officiellement démarré
Étape 1 : Tout d'abord, examinons la structure simple de ces données, les vignettes et les informations de description du livre
Ce qui suit est le code du fichier XML :

<?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>

Deuxièmement, regardons le code JavaScript chargé dans le document HTML vierge :

$(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); 
}); 
}); 
});

Étape 2 : Ici, je ne parlerai que des principes et du processus de fonctionnement de Code JavaScript, mais je ne discuterai pas trop de la syntaxe. Si vous avez des questions sur la syntaxe, veuillez me laisser un message ou consulter les documents liés à JQuery.
Ligne 1 : lorsque le document HTML est préparé (c'est-à-dire que le HTML et le JavaScript sont téléchargés), la méthode $(document).ready de JQuery et le processus qu'il contient seront automatiquement déclenchés. Évidemment, la méthode $.get est exécutée en premier ici.
Ligne 3 : Le premier paramètre de $.get est le chemin relatif du fichier XML (notez que le chemin doit être renseigné correctement. Ici nous mettons les fichiers XML et la page web dans le même dossier). Le deuxième paramètre est une fonction de rappel, c'est-à-dire fonction de rappel . C'est-à-dire que le contenu de ce fichier XML est demandé via la méthode get, puis les données qu'il contient sont manipulées via cette fonction de rappel. Le paramètre d de rappel représente toutes les données renvoyées par le rappel XML. Avec ce paramètre d, nous pouvons procéder au contenu suivant.
Ligne 4 : Ajoutez dynamiquement une balise 4a249f0d628e2318394fd9b75b4636b1 dans le CORPS du document via JavaScript C'est le titre global de la page, cela n'a pas d'importance
Ligne 5 : Ajoutez également dynamiquement une balise 0184af26f9d7e67766a079c1aa723ac3 dans le BODY , utilisé comme conteneur de contenu sous la boucle conteneur. (La ligne 20 sera utilisée)
Ligne 7 : Cette ligne est importante car nous avons déjà dit que le paramètre d de la fonction de rappel représente toutes les données de rappel du XML. Nous devons maintenant traiter. (filtrage) et formatage ; attention : ici, la balise du livre (tag) est recherchée, puis la fonction après chacune est exécutée en boucle jusqu'à ce que les entrées de données dans le XML soient complètement cyclées (un peu comme la fonction du ; foreach en PHP)
Ligne 9 : $(this) crée en fait un objet , dans le but d'instancier l'objet d'informations de livre actuel de d pour faciliter l'opération. Ligne 10 --Ligne 12 : Obtenez respectivement le nom du livre, la description et la vignette de l'objet actuel $book (notez que la syntaxe pour obtenir les valeurs d'attribut et les valeurs de nœud est différente)
Ligne 14-Ligne 18 ; : Formater les informations du livre pour la sortie ;
Ligne 20 : Afficher les informations formatées dans le document en mode de sortie HTML.
Ligne 22 : Pour indiquer à l'utilisateur que nos informations actuelles sont lues à partir de XML, l'image disparaît après 2000 millisecondes (2 secondes).
Étape 3 : À ce stade, vous avez terminé. Tout le monde est invité à me laisser un message pour discuter du développement de JQuery et des problèmes que vous rencontrez. N'hésitez pas à me donner des conseils. De plus, veuillez exécuter le dossier téléchargé dans un environnement WEB (IIS ou
Hôte virtuel). Veuillez ne pas cliquer pour l'exécuter directement.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes de mise en œuvre du téléchargement de fichiers avec Jquery+LigerUI

Explication détaillée de jquery chargement dynamique des fichiers js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!