Quick tip: Leverage the power of jQuery to extract data from XML files

In this quick tip, I'll show you how to load data from an XML file onto a blank page. We will use the $.get function and implement loading the gif when retrieving the information. We will present a simple list of recommended web development books. let's start.

Step 1: Check the script

First, let's look at a simple XML file. It only contains a few books with their titles, images, and 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>

Next, let's look at jQuery in action.

    $(document).ready(function()
      {
        $.get('myData.xml', function(d){
        $('body').append('<h1 id="Recommended-Web-Development-Books"> 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="Quick tip: Leverage the power of jQuery to extract data from XML files" />';
            html += '<p class="title">' + title + '</p>';
            html += '<p> ' + description + '</p>' ;
            html += '</dd>';

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

Step 2: Decipher the time

Since this is a quick tip, I'll run the script faster than usual. When the document is ready for manipulation, we will get the XML file using the "$.get" function. In parentheses we will pass in the location of the file and then run the callback function. I will use the variable "d" to represent the information extracted from the XML file. Next, we'll create a title tag and a definition list.

Continuing, we will search the XML file (d) and find the tag titled "book". Looking back at my files, there are three books in total. Therefore, we need to run the "each" method to perform operations on each book. Remember, "each" is like a "for" statement. This is a way to iterate over each element in a wrapped set.

In the next code block, I define some variables. To get the "title" and "description" from the XML file, we use ".attr(value)" - where "value" is equal to the attribute inside the tag.

Finally, we create a variable called "html" that will contain the html that displays the information from the XML file. However, just assigning that information to a variable will not display it on the page. To add it to the page, we get the list of definitions and append the variables. - $('dl').append($(html));

One more thing worth mentioning is that when retrieving information from the XML file we will display a standard loading gif (via a background image). Once the data is loaded, we'll grab the image and fade it out.

You’re done

I know I went through this very quickly; so please feel free to comment and ask any questions you may have. It should be noted that this script needs more work before it is ready for a real-world website. You have to compensate those who have turned off Javascript. In this case, if they do turn it off, they'll be staring at a blank page. You have to compensate for these things. But, I digress.

The above is the detailed content of Quick tip: Leverage the power of jQuery to extract data from XML files. For more information, please follow other related articles on the PHP Chinese website!