JQuery reads XML file data and displays the implementation code_jquery

Preparation work

Before we start, we need to do the following preparation work:

1. Create a blank html file named DEMO.html; (it is recommended to use Editplus to create it)

2 .Be familiar with the basic syntax of the JQuery framework; (It doesn’t matter if you are not familiar with it, I will explain it in detail later)

3. Create an XML file named data.xml to store data. The structure of XML will be covered below. Yes, you can also download the file I packaged to view;

4. A loading.gif image, this image is used to display in the blank html document during the waiting time for reading the XML

Official start

Step 1: First, let us take a look at the simple structure of this data.xml. The data I demonstrate here is "Several books recommended by Saturn for you", so it is book information, then xml includes the name, thumbnail and book description information of the book;

The following is the XML file code:

Copy code The code is as follows:

Here is the overview (www.jb51.net)





Here is the overview (www.jb51.net)





Here is the overview (www.jb51.net)

Secondly, let’s look at the JavaScript code loaded in a blank HTML document:

Copy the code The code is as follows:

$(document).ready(function()
{
$.get('myData.xml', function(d){
$('body').append ('

Saturn recommends some books to you:

');
$('body').append('

');

$(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 = '

< ;img class="bookImage" alt="" src="' imageurl '" />

';
html = '

';
html = '

' title '

';
html = '

' description '

' ;
html = '

';

$('dl').append($(html));

$('.loadingPic'). fadeOut(2000);
});
});
});

Step 2: Here, I will only talk about the principles and operation process of JavaScript code, but will not discuss the syntax too much. If you have any questions about the syntax, please leave me a message or check out the JQuery related documents.

Line 1: When the HTML document is prepared (that is, both html and JavaScript are downloaded), JQuery's $(document).ready method and the process inside will be automatically triggered. Obviously, the $.get method is executed first here.
Line 3: The first parameter of $.get is the relative path of the XML file (note that the path must be filled in correctly. Here we put the XML and web page files in the same folder). The second parameter is a Callback function, that is, the callback function. That is to say, the content of this XML file is requested through the get method, and then the data inside is manipulated through this callback function. The parameter d of callback represents all the data returned from the XML callback. With this parameter d, we can proceed with the following content.
Line 4: Dynamically add a tag

in the BODY of the document through JavaScript. This is the overall title of the page, it doesn’t matter;
Line 5: Also dynamically add a tag

in the BODY , used as a content container under the containing loop. (Line 20 will be used)
Line 7: This line is important because we have already said that the parameter d of the callback function represents all the data callback from XML. Now we need to process (filter) these data and Formatting; please note: here, the book tag (tag) is searched, and then the function after each is executed in a loop until the data entries in the xml are completely cycled; (a bit like the function of the foreach function in PHP)
Line 9: $(this) actually creates an object. The purpose is to instantiate the current book information object of d to facilitate operation. This is $book;
Line 10--Line 12: Get the current object $book respectively. Book name, description and thumbnail; (note that the syntax for getting attribute values ​​and node values ​​is different)
Line 14-Line 18: Format book information for output;
Line 20: Format the information Output to the document in HTML output mode.
Line 22: To tell the user that our current information is being read from XML, the image fades away after 2000 milliseconds (2 seconds).

Step 3: At this point, you’re done. Everyone is welcome to leave me a message to discuss the development of JQuery and the problems you encounter. Please feel free to give me advice. In addition, please run the downloaded folder in a WEB environment (IIS or virtual host). Please do not click to run it directly.

Code package download