JQuery lit et affiche les fichiers XML

php中世界最好的语言

Libérer： 2018-04-23 14:55:39

original

1949 Les gens l'ont consulté

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>

Copier après la connexion

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

$(document).ready(function() 
{ 
$.get(&#39;myData.xml&#39;, 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); 
}); 
}); 
});

Copier après la connexion

É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