JQuery reads and displays XML files

php中世界最好的语言

Release： 2018-04-23 14:55:39

Original

1948 people have browsed it

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>

Copy after login

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

$(document).ready(function() 
{ 
$.get(&#39;myData.xml&#39;, function(d){ 
$(&#39;body&#39;).append(&#39;<h1> 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" alt="" src="&#39; + imageurl + &#39;" /> </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); 
}); 
}); 
});

Copy after login

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