快捷導(dǎo)航

在jQuery中處理XML數(shù)據(jù)的大致方法

更新時間：2015年08月14日 15:51:52 作者：libuchao

這篇文章主要介紹了在jQuery中處理XML數(shù)據(jù)的大致方法,jQuery是當(dāng)下人氣最高的JavaScript庫,需要的朋友可以參考下

XML 全稱為可擴(kuò)展標(biāo)記語言，其文件結(jié)構(gòu)與 HTML 類似，但是區(qū)別也很明顯，HTML 只能使用已經(jīng)定義的標(biāo)簽，如 title, body, span 等，標(biāo)簽種類是有限的，但是 XML 除了可以使用 HTML 的所有標(biāo)簽，還可以自己隨意定制標(biāo)簽，如 person, name, sex, age 等，而且 XML 中的標(biāo)簽屬性名稱，也可以隨意定制。另外二者用途方面也有明顯區(qū)別，HTML 主要用來展示數(shù)據(jù)，XML 則側(cè)重于數(shù)據(jù)的存儲和傳輸。例如下面這個簡單的 XML 文檔用以存儲員工信息：

<員工>
 <姓名>麻花疼</姓名>
 <性別>男</性別>
 <年齡>40</年齡>
 <職位>疼遜CEO</職位>
</員工>

下面本文簡單介紹如何使用 jQuery 載入一個 XML 文件并從中獲取自己想要的數(shù)據(jù)。
準(zhǔn)備 XML 文檔及測試數(shù)據(jù)

假設(shè)我們現(xiàn)在要構(gòu)建一個包含人員信息的 XML 文檔，該 XML 文檔要能反映其姓名、所在公司、公司簡介、公司產(chǎn)品簡介幾個信息，那么我們可以把 XML 設(shè)計成如下樣式：

<?xml version="1.0" encoding="utf-8" ?>
<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 version="1.0" encoding="utf-8" ?> 是聲明此文檔為 XML 文檔，且文本編碼為 utf-8。第二行及最后一行 Persons 為文檔的根元素，然后每個 Person 元素即表示每個人，姓名存儲在 Person 元素的 FullName 屬性中，Corporation 元素用來存儲所在公司名稱，Description 元素用來存儲公司簡介，Products 元素用來存儲公司產(chǎn)品簡介。至此，該文檔里面包含了比爾·蓋茨、喬布斯、拉里·佩奇三位 IT 界大佬的信息。
用 jQuery 解析此 XML 文檔

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

<script type="text/javascript">
jQuery(document).ready(function() {
 /* 先用 $.get 方法載入 XML 文件 */
 $.get("EmployeesInformation.xml", function(xmlData) {
 /* 我們要講得到的數(shù)據(jù)放入一個表格里面，這里定義一個表格字符竄 */
 var htmlData = "<table border='1'>";

 /* 找到 Person 元素，然后用 each 方法進(jìn)行遍歷 */
 $(xmlData).find("Person").each(function() {
  var Person = $(this); /* 將當(dāng)前元素復(fù)制給 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 的值 */

  /* 將得到的數(shù)據(jù)，放到表格的一行中 */
  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()方法的第一個參數(shù)為 XML 文件地址，第二個參數(shù)是一個回調(diào)函數(shù)，回調(diào)函數(shù)中參數(shù) xmlData 即為 XML 文件中的數(shù)據(jù)。在此示例中，我們打算 XML 中的數(shù)據(jù)以表格的形式顯示在 HTML 中，所以先構(gòu)建一個表格字符串 htmlData 先。

緊接著，用find()方法，找到所有名為 Person 的元素，因?yàn)槊總€ Person 元素即表示一個人，然后再用 each() 方法進(jìn)行遍歷，把遍歷到的元素賦個一個變量 Person。用Person.attr()方法去除元素的 FullName 屬性，也就是人員的姓名，再用find()方法找到其子元素 Corporation，Description 和 Products 并返回它們的文本內(nèi)容，并用 tr 和 td 標(biāo)簽將它們包裝在表格的一個行里面。最后完成表格字符串，并將表格添加到 body 標(biāo)簽中。

您可能感興趣的文章: