JQuery reads and displays XML files

This time I will bring you JQuery to read and display XML files. What are the precautions for JQuery to read and display XML files? The following is a practical case, let's take a look.

Preparation

We need to do the following preparations before starting:

1. Create a blank html file named DEMO.html; (Editplus is recommended Create)
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 and the structure of XML It will be covered below, 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 the XML to be read out
Officially started
Step 1: First, let us take a look at the simple structure of this data. , thumbnails and book description information;
The following is the XML file code:

<?xml version="1.0" encoding="utf-8" ?> 
<books> 
<book title="藏地密码" imageurl="images/Tibet_Code.jpg"> 
<description> 
这里是概况
</description> 
</book> 
<book title="剑桥雅思6" imageurl="images/ielts.jpg"> 
<description> 
这里是概况
</description> 
</book> 
<book title="Professional ASP.NET" imageurl="images/asp.jpg"> 
<description> 
这里是概况=
</description> 
</book> 
</books>

Secondly, let us look at the JavaScript code loaded in the blank HTML document:

$(document).ready(function() 
{ 
$.get('myData.xml', function(d){ 
$(&#39;body&#39;).append(&#39;<h1 id="nbsp-Saturn给你推荐几本书-nbsp"> Saturn给你推荐几本书： </h1>&#39;); 
$(&#39;body&#39;).append(&#39;<dl />&#39;); 
$(d).find(&#39;book&#39;).each(function(){ 
var $book = $(this); 
var title = $book.attr("title"); 
var description = $book.find(&#39;description&#39;).text(); 
var imageurl = $book.attr(&#39;imageurl&#39;); 
var html = &#39;<dt> <img class="bookImage lazy"  src="/static/imghwm/default1.png"  data-src="&#39; + imageurl + &#39;"   alt=""  /> </dt>&#39;; 
html += &#39;<dd> <span class="loadingPic" alt="Loading" />&#39;; 
html += &#39;<p class="title">&#39; + title + &#39;</p>&#39;; 
html += &#39;<p> &#39; + description + &#39;</p>&#39; ; 
html += &#39;</dd>&#39;; 
$(&#39;dl&#39;).append($(html)); 
$(&#39;.loadingPic&#39;).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, which is
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

to the BODY of the document through JavaScript. This is the overall title of the page, which is irrelevant;
Line 5: Also dynamically add a tag

to the BODY. , used as a content container under the containing loop. (Line 20 will be used)
Line 7: This line is very important, because we have already said that the parameters of the callback
function d represent all the data callback from the XML, now we need to Processing (filtering) 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 book name, description and thumbnail of the current object $book respectively; (note that the syntax for getting attribute values ​​and node values ​​is different)
Line 14-Line 18: Format book information for output;
Line 20: Output the formatted information 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.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Jquery LigerUI detailed explanation of file upload steps

jquery dynamically loaded js file detailed explanation

The above is the detailed content of JQuery reads and displays XML files. For more information, please follow other related articles on the PHP Chinese website!