Astuce : exploitez la puissance de jQuery pour extraire des données à partir de fichiers XML

Dans cette astuce rapide, je vais vous montrer comment charger les données d'un fichier XML sur une page vierge. Nous utiliserons la fonction $.get et implémenterons le chargement du gif lors de la récupération des informations. Nous présenterons une liste simple de livres de développement Web recommandés. Commençons.

Étape 1 : Vérifiez le script

Tout d’abord, regardons un simple fichier XML. Il ne contient que quelques livres avec leurs titres, images et descriptions.

<?xml version="1.0" encoding="utf-8" ?>
<books>
    <book title="CSS Mastery" imageurl="images/css.jpg">
    <description>
    info goes here.
    </description>
    </book>

    <book title="Professional ASP.NET" imageurl="images/asp.jpg">
    <description>
    info goes here.
    </description>
    </book>

    <book title="Learning jQuery" imageurl="images/lj.jpg">
    <description>
    info goes here.
    </description>
    </book>
</books>

Examinons ensuite jQuery en action.

    $(document).ready(function()
      {
        $.get('myData.xml', function(d){
        $('body').append('<h1> Recommended Web Development Books </h1>');
        $('body').append('<dl />');

        $(d).find('book').each(function(){

            var $book = $(this); 
            var title = $book.attr("title");
            var description = $book.find('description').text();
            var imageurl = $book.attr('imageurl');

            var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
            html += '<dd> <span class="loadingPic" alt="Astuce : exploitez la puissance de jQuery pour extraire des données à partir de fichiers XML" />';
            html += '<p class="title">' + title + '</p>';
            html += '<p> ' + description + '</p>' ;
            html += '</dd>';

            $('dl').append($(html));
            
            $('.loadingPic').fadeOut(1400);
        });
    });
});

Étape 2 : Déchiffrer l'heure

Puisqu'il s'agit d'une astuce rapide, je vais exécuter le script plus rapidement que d'habitude. Lorsque le document est prêt à être manipulé, nous obtiendrons le fichier XML en utilisant la fonction "$.get". Entre parenthèses, nous passerons l'emplacement du fichier puis exécuterons la fonction de rappel. J'utiliserai la variable "d" pour représenter les informations extraites du fichier XML. Ensuite, nous allons créer une balise de titre et une liste de définitions.

En continuant, nous allons rechercher dans le fichier XML (d) et trouver la balise intitulée « livre ». En regardant mes dossiers, il y a trois livres au total. Par conséquent, nous devons exécuter la méthode « each » pour effectuer des opérations sur chaque livre. N'oubliez pas que « chacun » est comme une déclaration « pour ». C'est une façon de parcourir chaque élément d'un ensemble encapsulé.

Dans le bloc de code suivant, je définis quelques variables. Pour obtenir le "titre" et la "description" du fichier XML, nous utilisons ".attr(value)" - où "value" est égal à l'attribut à l'intérieur de la balise.

Enfin, nous créons une variable appelée "html" qui contiendra le code HTML qui affiche les informations du fichier XML. Cependant, le simple fait d'attribuer ces informations à une variable ne les affichera pas sur la page. Pour l'ajouter à la page, nous obtenons la liste des définitions et ajoutons les variables. - $('dl').append($(html));

Une autre chose à mentionner est que lors de la récupération des informations du fichier XML, nous afficherons un gif de chargement standard (via une image d'arrière-plan). Une fois les données chargées, nous récupérerons l’image et la ferons disparaître.

Vous avez terminé

Je sais que j'ai vécu cela très rapidement, alors n'hésitez pas à commenter et à poser toutes vos questions. Il convient de noter que ce script nécessite beaucoup plus de travail avant d'être prêt pour un site Web réel. Vous devez compenser ceux qui ont désactivé Javascript. Dans ce cas, s’ils l’éteignent, ils se retrouveront face à une page blanche. Vous devez compenser ces choses. Mais je m'éloigne du sujet.

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!