Analyse une chaîne de caractères CSV dans un tableau
La bibliothèque JavaScript jQuery est surtout connue pour son utilisation avec le HTML, mais vous pouvez également l'utiliser pour traiter le XML. Cet article montre comment utiliser jQuery pour traiter un ensemble de données au format XML
Dans un nombreuse précédent article, j'ai expliqué avec un exemple comment extraire des données d'un fichier XML en utilisant JavaScript et l'objet XMLHttpRequest. Maintenant, dans cet article, je partage un exemple simple qui montre comment extraire et lire des données XML d'un fichier en utilisant jQuery et Ajax.
L'exemple ci-dessous extrait des données d'un fichier. Il faut donc d'abord créer un fichier XML (avec l'extension .xml). Vous pouvez copier les données de ce fichier. Il n'y a pas de problème si vous avez une liste ou un format différent, cependant, faites attention en définissant les nœuds dans votre script.
Comment lire le XML en JavaScript avec jQuery|Ajax ?
Voici l'exemple de fichier XML que nous utiliserons pour la démonstration. Télécharger le ici
Le fichier XML contient une liste de livres avec le titre, l'auteur, le prix et un lien qui renvoie vers une page web décrivant le livre.
Le format XML du fichier contient donc 4 nœud pour chaque livre.
Vous pouvez utiliser tout autre fichier XML dont vous disposer, faites seulement attention au nœud .
Maintenant, pour traiter le XML en utilisant jQuery, voici le principe comment faire.
Définissez un élément div qui sera utilisé pour afficher le contenu XML.
Comme l'affichage sera dans la liste, ajoutez le UL à l'élément div.
Appelez la méthode ajax pour traiter le fichier xml.
Définissez le type de requête HTTP à "GET" et fournissez également le nom du fichier XML dans l'url.
Définissez le type de données à "xml".
Nous devons également définir une fonction de rappel, qui est appelée lorsque la demande est réussie ou si une erreur se produit.
Ainsi, lorsque le callback de succès est appelé, alors on fait une boucle à travers le contenu xml.
Obtenez la valeur du nœud pour "titre" et l'"auteur" et ajoutez-la au div.
Définir le callback d'erreur pour gérer l'erreur.
Et voici donc le code jQuery complet.
Code
<!DOCTYPE html>
<html>
<head>
<title>Demo ajax</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
table{border-collapse: collapse;}
a{text-decoration:none;}
</style>
<script>
$(document).ready(function(){
$("#conteneur").append("<ol></ol>");
$.ajax({
type: "GET",
url: "https://www.oujood.com/jquery/livres.xml",
dataType: "xml",
success: function(xml){
$(xml).find('livre').each(function(){
var stitre = $(this).find('titre').text();
var sAuteur = $(this).find('auteur').text();
var slien=$(this).find('lien').text();
$("<li></li>").html("<a href='"+ slien + "' target='_blank'>" + stitre + ", par: " + sAuteur).appendTo("#conteneur ol");
});
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
</script>
</head>
<body>
<p>Cliquer sur le titre pour en savoir plus le livre</p>
<div id="conteneur"></div>
</body>
</html>