La méthode générale de traitement des données XML dans jQuery_jquery

XML signifie Extensible Markup Language. Sa structure de fichier est similaire à HTML, mais la différence est également évidente. HTML ne peut utiliser que des balises définies, telles que le titre, le corps, la durée, etc. Les types de balises sont limités, mais XML sauf Vous pouvez utiliser toutes les balises HTML, et vous pouvez également personnaliser les balises à volonté, telles que la personne, le nom, le sexe, l'âge, etc., et les noms d'attributs de balise en XML peuvent également être personnalisés à volonté. De plus, il existe des différences évidentes dans les utilisations des deux. HTML est principalement utilisé pour afficher des données, tandis que XML se concentre sur le stockage et la transmission de données. Par exemple, le simple document XML suivant est utilisé pour stocker les informations sur les employés :

<员工>
 <姓名>麻花疼</姓名>
 <性别>男</性别>
 <年龄>40</年龄>
 <职位>疼逊CEO</职位>
</员工>

L'article suivant présente brièvement comment utiliser jQuery pour charger un fichier XML et en obtenir les données souhaitées.
Préparer des documents XML et tester les données

Supposons que nous souhaitions maintenant créer un document XML contenant des informations sur le personnel. Le document XML doit refléter son nom, son entreprise, son profil d'entreprise et son profil de produit. Nous pouvons ensuite concevoir le XML dans le style suivant :

.

<&#63;xml version="1.0" encoding="utf-8" &#63;>
<Persons>
 <Person FullName="Bill Gates">
 <Corporation>Microsoft</Corporation>
 <Description>The largest software company</Description>
 <Products>Windows series OS, SQL Server Database, XBox 360...</Products>
 </Person>

 <Person FullName="Jobs">
 <Corporation>Apple</Corporation>
 <Description>The famous software company</Description>
 <Products>Macintosh, iPhone, iPod, iPad...</Products>
 </Person>

 <Person FullName="Larry Page">
 <Corporation>Google</Corporation>
 <Description>the largest search engine</Description>
 <Products>Google search, Google Adsense, Gmail...</Products>
 </Person>
</Persons>

Une brève analyse de ce fichier XML montre que la première ligne déclare que ce document est un document XML et que l'encodage du texte est utf-8. . La deuxième et dernière ligne de Personnes est l'élément racine du document, et chaque élément Personne représente chaque personne. Le nom est stocké dans l'attribut FullName de l'élément Personne, l'élément Corporation est utilisé pour stocker le nom de l'entreprise et. l'élément Description est utilisé pour stocker le profil de l'entreprise. L'élément Products est utilisé pour stocker un profil de produit de l'entreprise. Jusqu'à présent, le document contient des informations sur trois magnats de l'industrie informatique : Bill Gates, Steve Jobs et Larry Page.
Analysez ce document XML avec jQuery

Utilisez d'abord la méthode $.get() pour charger le fichier XML, puis utilisez la méthode find() pour rechercher tous les éléments Person, puis utilisez la méthode each() pour parcourir. Le code est le suivant : <🎜. >

<script type="text/javascript">
jQuery(document).ready(function() {
 /* 先用 $.get 方法载入 XML 文件 */
 $.get("EmployeesInformation.xml", function(xmlData) {
 /* 我们要讲得到的数据放入一个表格里面，这里定义一个表格字符窜 */
 var htmlData = "<table border='1'>";

 /* 找到 Person 元素，然后用 each 方法进行遍历 */
 $(xmlData).find("Person").each(function() {
  var Person = $(this); /* 将当前元素复制给 Person */
  var FullName = Person.attr("FullName"); /* 获取 Person 的 FullName 属性 */
  var Corporation = Person.find("Corporation").text(); /* 获取 Person 中子元素 Corporation 的值 */
  var Description = Person.find("Description").text(); /* 获取 Person 中子元素 Description 的值 */
  var Products = Person.find("Products").text(); /* 获取 Person 中子元素 Products 的值 */

  /* 将得到的数据，放到表格的一行中 */
  htmlData += "<tr>";
  htmlData += " <td>" + FullName + "</td>";
  htmlData += " <td>" + Corporation + "</td>";
  htmlData += " <td>" + Description + "</td>";
  htmlData += " <td>" + Products + "</td>";
  htmlData += "</tr>";
 });
 
 //完成表格字符窜
 htmlData += "</table>";
 //将表格放到 body 中
 $("body").append(htmlData);
 });
});
</script>

Expliquez brièvement ce code. Comme ce document XML est relativement simple, ce code est également relativement court. Le premier paramètre de la méthode $.get() dans le code est l'adresse du fichier XML, et le deuxième paramètre est un rappel. , le paramètre xmlData dans la fonction de rappel correspond aux données du fichier XML. Dans cet exemple, nous souhaitons que les données au format XML soient affichées au format HTML sous forme de tableau. Créez donc d'abord une chaîne de tableau htmlData.

Ensuite, utilisez la méthode find() pour rechercher tous les éléments nommés Person, car chaque élément Person représente une personne, puis utilisez la méthode each() pour parcourir et attribuer les éléments traversés à une variable Person . Utilisez la méthode Person.attr() pour supprimer l'attribut FullName de l'élément, qui est le nom de la personne, puis utilisez la méthode find() pour rechercher ses sous-éléments Corporation, Description et Products et renvoyer leur contenu textuel, et utilisez balises tr et td pour les envelopper dans une ligne d’un tableau. Enfin, complétez la chaîne du tableau et ajoutez le tableau à la balise body.