JQuery讀取顯示XML文件
- php中世界最好的语言原創
- 2018-04-23 14:55:391945瀏覽
這次帶給大家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中動態加入一個標籤4a249f0d628e2318394fd9b75b4636b1，這個是頁面的總標題，無關緊要;
行5：同樣在BODY中動態加入一個標籤5c69336ffbc20d23018e48b396cdd57a ,用來作為包含循環下面的內容容器。 （行20會用到）
行7：這一行很重要，因為我們已經說過，回呼函數的參數d表示從XML回調的所有數據，現在我們就需要對這些數據進行處理（篩選）和格式化；請注意：這裡透過搜尋book標籤（tag），然後循環執行each後面的函數，直到xml裡面資料的條目完全循環完畢；（有點像PHP裡面的foreach函數的功能）
行9：$(this)實際上就建立一個物件，目的是將d的當前一本書資訊物件實例化，方便進行操作，這就是$book;
行10 --行12：分別取得目前物件$book的書籍名稱，描述和縮圖；（注意取屬性值和取節點值的語法不同）
行14-行18：格式化書籍訊息，以便輸出；
行20：將格式化後的資訊以HTML輸出方式輸出到文件中。
行22：為了告訴使用者我們目前的資訊正在從XML中讀取，2000毫秒（2秒）後，圖片逐漸消失。
Step 3:至此，大功告成。歡迎大家給我留言，共同討論JQuery的發展和你所碰到的問題，請不吝賜教。另外，請將下載後的資料夾放在WEB環境下運作（IIS或虛擬主機），請不要直接點開運行。
我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是JQuery讀取顯示XML文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！