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.
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>
$(document).ready(function() { $.get('myData.xml', function(d){ $('body').append('<h1> Saturn给你推荐几本书: </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="Loading" />'; html += '<p class="title">' + title + '</p>'; html += '<p> ' + description + '</p>' ; html += '</dd>'; $('dl').append($(html)); $('.loadingPic').fadeOut(2000); }); }); });
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!
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

When deleting or decompressing a folder on your computer, sometimes a prompt dialog box "Error 0x80004005: Unspecified Error" will pop up. How should you solve this situation? There are actually many reasons why the error code 0x80004005 is prompted, but most of them are caused by viruses. We can re-register the dll to solve the problem. Below, the editor will explain to you the experience of handling the 0x80004005 error code. Some users are prompted with error code 0X80004005 when using their computers. The 0x80004005 error is mainly caused by the computer not correctly registering certain dynamic link library files, or by a firewall that does not allow HTTPS connections between the computer and the Internet. So how about

Quark Netdisk and Baidu Netdisk are currently the most commonly used Netdisk software for storing files. If you want to save the files in Quark Netdisk to Baidu Netdisk, how do you do it? In this issue, the editor has compiled the tutorial steps for transferring files from Quark Network Disk computer to Baidu Network Disk. Let’s take a look at how to operate it. How to save Quark network disk files to Baidu network disk? To transfer files from Quark Network Disk to Baidu Network Disk, you first need to download the required files from Quark Network Disk, then select the target folder in the Baidu Network Disk client and open it. Then, drag and drop the files downloaded from Quark Cloud Disk into the folder opened by the Baidu Cloud Disk client, or use the upload function to add the files to Baidu Cloud Disk. Make sure to check whether the file was successfully transferred in Baidu Cloud Disk after the upload is completed. That's it

Recently, many netizens have asked the editor, what is the file hiberfil.sys? Can hiberfil.sys take up a lot of C drive space and be deleted? The editor can tell you that the hiberfil.sys file can be deleted. Let’s take a look at the details below. hiberfil.sys is a hidden file in the Windows system and also a system hibernation file. It is usually stored in the root directory of the C drive, and its size is equivalent to the size of the system's installed memory. This file is used when the computer is hibernated and contains the memory data of the current system so that it can be quickly restored to the previous state during recovery. Since its size is equal to the memory capacity, it may take up a larger amount of hard drive space. hiber

Detailed explanation of the role of .ibd files in MySQL and related precautions MySQL is a popular relational database management system, and the data in the database is stored in different files. Among them, the .ibd file is a data file in the InnoDB storage engine, used to store data and indexes in tables. This article will provide a detailed analysis of the role of the .ibd file in MySQL and provide relevant code examples to help readers better understand. 1. The role of .ibd files: storing data: .ibd files are InnoDB storage

In Linux systems, you can use the following command to view the contents of the log file: tail command: The tail command is used to display the content at the end of the log file. It is a common command to view the latest log information. tail [option] [file name] Commonly used options include: -n: Specify the number of lines to be displayed, the default is 10 lines. -f: Monitor the file content in real time and automatically display the new content when the file is updated. Example: tail-n20logfile.txt#Display the last 20 lines of the logfile.txt file tail-flogfile.txt#Monitor the updated content of the logfile.txt file in real time head command: The head command is used to display the beginning of the log file

Working with files in the Linux operating system requires the use of various commands and techniques that enable developers to efficiently create and execute files, code, programs, scripts, and other things. In the Linux environment, files with the extension ".a" have great importance as static libraries. These libraries play an important role in software development, allowing developers to efficiently manage and share common functionality across multiple programs. For effective software development in a Linux environment, it is crucial to understand how to create and run ".a" files. This article will introduce how to comprehensively install and configure the Linux ".a" file. Let's explore the definition, purpose, structure, and methods of creating and executing the Linux ".a" file. What is L

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <

The os.Rename function is used in Go language to rename files. The syntax is: funcRename(oldpath,newpathstring)error. This function renames the file specified by oldpath to the file specified by newpath. Examples include simple renaming, moving files to different directories, and ignoring error handling. The Rename function performs an atomic operation and may only update directory entries when the two files are in the same directory. Renames may fail across volumes or while a file is in use.
