在jQuery中處理XML資料的大致方法_jquery-js教程-PHP中文網

在jQuery中處理XML資料的大致方法_jquery

WBOY

發布： 2016-05-16 15:45:09

原創

1161 人瀏覽過

XML 全稱為可擴展標記語言，其檔案結構與HTML 類似，但是差異也很明顯，HTML 只能使用已經定義的標籤，如title, body, span 等，標籤種類是有限的，但是XML 除了可以使用HTML 的所有標籤，也可以自己隨意自訂標籤，如person, name, sex, age 等，而且XML 中的標籤屬性名稱，也可以隨意自訂。另外二者用途方面也有明顯差異，HTML 主要用來展示數據，XML 則著重於數據的儲存與傳輸。例如下面這個簡單的 XML 文件用以儲存員工資訊：

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

登入後複製

以下本文簡單介紹如何使用 jQuery 載入一個 XML 檔案並從中取得自己想要的資料。
準備 XML 文件及測試資料

假設我們現在要建立一個包含人員資訊的XML 文檔，該XML 文檔要能反映其姓名、所在公司、公司簡介、公司產品簡介幾個信息，那麼我們可以把XML 設計成如下樣式：

<&#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>

登入後複製

簡單分析一下這個 XML 文件，其中第一行是聲明此文檔為 XML 文檔，且文字編碼為 utf-8。第二行及最後一行Persons 為文件的根元素，然後每個Person 元素即表示每個人，姓名儲存在Person 元素的FullName 屬性中，Corporation 元素用來儲存所在公司名稱，Description 元素用來儲存公司簡介， Products 元素用來儲存公司產品簡介。至此，該文件裡麵包含了比爾蓋茲、賈伯斯、拉里佩奇三位 IT 界大佬的資訊。
用 jQuery 解析此 XML 文件

首先要用$.get()方法載入 XML 文件，然後用find()方法找到所有 Person 元素，再用 each() 方法進行遍歷，程式碼如下：

<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>

登入後複製

簡單解釋這段程式碼，由於此XML 文件相對簡單，所以這段程式碼也比較簡短，程式碼中$.get()方法的第一個參數為XML 檔案位址，第二個參數是一個回調函數，回呼函數中參數xmlData 即為XML 檔案中的資料。在這個範例中，我們打算 XML 中的資料以表格的形式顯示在 HTML 中，所以先建立一個表格字串 htmlData 先。

緊接著，用find()方法，找出所有名為Person 的元素，因為每個Person 元素即表示一個人，然後再用each() 方法進行遍歷，把遍歷到的元素賦個一個變數Person 。用Person.attr()方法去除元素的FullName 屬性，也就是人員的姓名，再用find()方法找到其子元素Corporation，Description 和Products 並傳回它們的文字內容，並用tr 和td 標籤將它們包裝在表格的一行裡面。最後完成表格字串，並將表格加入到 body 標籤中。