The general method of processing XML data in jQuery_jquery

XML stands for Extensible Markup Language. Its file structure is similar to HTML, but the difference is also obvious. HTML can only use defined tags, such as title, body, span, etc. The types of tags are limited, but XML except You can use all HTML tags, and you can also customize tags at will, such as person, name, sex, age, etc., and the tag attribute names in XML can also be customized at will. In addition, there are obvious differences in the uses of the two. HTML is mainly used to display data, while XML focuses on the storage and transmission of data. For example, the following simple XML document is used to store employee information:

<员工>
 <姓名>麻花疼</姓名>
 <性别>男</性别>
 <年龄>40</年龄>
 <职位>疼逊CEO</职位>
</员工>

The following article briefly introduces how to use jQuery to load an XML file and get the data you want from it.
Prepare XML documents and test data

Suppose we now want to build an XML document containing personnel information. The XML document should reflect his name, company, company profile, and company product profile. Then we can design the XML into the following style:

<&#63;xml version="1.0" encoding="utf-8" &#63;>
<Persons>
 <Person FullName="Bill Gates">
 <Corporation>Microsoft</Corporation>
 <Description>The largest software company</Description>
 <Products>Windows series OS, SQL Server Database, XBox 360...</Products>
 </Person>

 <Person FullName="Jobs">
 <Corporation>Apple</Corporation>
 <Description>The famous software company</Description>
 <Products>Macintosh, iPhone, iPod, iPad...</Products>
 </Person>

 <Person FullName="Larry Page">
 <Corporation>Google</Corporation>
 <Description>the largest search engine</Description>
 <Products>Google search, Google Adsense, Gmail...</Products>
 </Person>
</Persons>

A brief analysis of this XML file shows that the first line declares that this document is an XML document and the text encoding is utf-8. The second and last row of Persons is the root element of the document, and each Person element represents each person. The name is stored in the FullName attribute of the Person element, the Corporation element is used to store the name of the company, and the Description element is used to store the company profile. The Products element is used to store a company product profile. So far, the document contains information about three IT industry tycoons: Bill Gates, Steve Jobs, and Larry Page.
Parse this XML document with jQuery

First use the $.get() method to load the XML file, then use the find() method to find all Person elements, and then use the each() method to traverse. The code is as follows:

<script type="text/javascript">
jQuery(document).ready(function() {
 /* 先用 $.get 方法载入 XML 文件 */
 $.get("EmployeesInformation.xml", function(xmlData) {
 /* 我们要讲得到的数据放入一个表格里面，这里定义一个表格字符窜 */
 var htmlData = "<table border='1'>";

 /* 找到 Person 元素，然后用 each 方法进行遍历 */
 $(xmlData).find("Person").each(function() {
  var Person = $(this); /* 将当前元素复制给 Person */
  var FullName = Person.attr("FullName"); /* 获取 Person 的 FullName 属性 */
  var Corporation = Person.find("Corporation").text(); /* 获取 Person 中子元素 Corporation 的值 */
  var Description = Person.find("Description").text(); /* 获取 Person 中子元素 Description 的值 */
  var Products = Person.find("Products").text(); /* 获取 Person 中子元素 Products 的值 */

  /* 将得到的数据，放到表格的一行中 */
  htmlData += "<tr>";
  htmlData += " <td>" + FullName + "</td>";
  htmlData += " <td>" + Corporation + "</td>";
  htmlData += " <td>" + Description + "</td>";
  htmlData += " <td>" + Products + "</td>";
  htmlData += "</tr>";
 });
 
 //完成表格字符窜
 htmlData += "</table>";
 //将表格放到 body 中
 $("body").append(htmlData);
 });
});
</script>

Briefly explain this code. Since this XML document is relatively simple, this code is also relatively short. The first parameter of the $.get() method in the code is the XML file address, and the second parameter is a callback. function, the parameter xmlData in the callback function is the data in the XML file. In this example, we intend the data in XML to be displayed in HTML as a table, so first build a table string htmlData first.

Next, use the find() method to find all elements named Person, because each Person element represents a person, and then use the each() method to traverse, and assign the traversed elements to a variable Person . Use the Person.attr() method to remove the FullName attribute of the element, which is the person's name, and then use the find() method to find its sub-elements Corporation, Description and Products and return their text content, and use tr and td tags to wrap them in inside a row of a table. Finally complete the table string and add the table to the body tag.