這次帶給大家JQuery讀取顯示XML文件，JQuery讀取顯示XML文件的注意事項有哪些，下面就是實戰案例，一起來看一下。
在開始之前我們需要做以下準備：
1.建立一個名為DEMO.html空白html檔案；（建議使用Editplus創建）
2. 熟悉JQuery框架的基本語法；（不熟悉沒關係，後面我會註釋得很詳細）
3. 創建一個名為data.xml的XML文件用來存儲數據，XML的結構下面會涉及到，你也可以下載我打包好的文件查看；
4.一個loading.gif圖片，這個圖片用於在將XML讀取出來的等待時間裡面顯示在空白html文檔中
正式開始
Step 1:首先讓我們看看這個data.xml的簡單結構，我這裡演示的數據是"Saturn為您推薦的幾本書"，故為書籍信息，那麼xml就包括書籍的名稱，縮圖和書籍描述資訊；
以下為 XML檔案程式碼：
<?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>
其次，讓我們看看載入在空白HTML文件裡面的JavaScript程式碼：
$(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);
});
});
});Step 2:這裡，我只講下JavaScript程式碼原理與運行流程，不過分討論語法，如果你對語法有任何疑問，請給我留言或查看JQuery相關文件。
行1：當HTML文件準備完畢之後（即html和JavaScript都下載完畢），會自動觸發JQuery的 $(document).ready方法及裡面的過程。顯然，這裡首先執行的是$.get方法。
行3：$.get的第一個參數是XML檔案的相對路徑（注意路徑要填寫正確，這裡我們把XML和網頁檔案放在同一資料夾）。第二個參數是一個Callback函數，也就是回呼函數。就是說透過get方法來請求這個XML檔案的內容，然後透過這個callback回呼函數來操作裡面的資料。而callback的參數d表示從XML回調過來的所有數據，有了這個參數d，我們就好進行下面的內容了。
行4：透過JavaScript在文件的BODY中動態加入一個標籤
我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是JQuery讀取顯示XML文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
