Jquery中文網 www.prqmtc.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 JQuery讀取XML文件數據并顯示的實現代碼

JQuery讀取XML文件數據并顯示的實現代碼

發布時間:2013-09-03   編輯:www.prqmtc.live
今天向大家演示如何通過JQuery框架為空白HTML文檔加載從XML文件讀取的數據并顯示出來。我們將會主要用到JQuery自帶過程$.get 。
今天向大家演示如何通過jquery框架為空白HTML文檔加載從XML文件讀取的數據并顯示出來。我們將會主要用到JQuery自帶過程$.get 。 準備工作

在開始之前我們需要做如下準備工作:

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>
這里是概況(www.jb51.net)
</description>
</book>

<book title="劍橋雅思6" imageurl="images/ielts.jpg">
<description>
這里是概況(www.jb51.net)
</description>
</book>

<book title="Professional ASP.NET" imageurl="images/asp.jpg">
<description>
這里是概況(www.jb51.net)
</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中動態添加一個標簽<h1>,這個是頁面的總標題,無關緊要;
行5:同樣在BODY中動態添加一個標簽<dl>,用來作為包含循環下面的內容容器。(行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或虛擬主機),請不要直接點開運行。

代碼打包下載

您可能感興趣的文章:
jQuery 行級解析讀取XML文件(附源碼)
php解析XML數據的一段代碼
php操作xml的各種方法解析
JQuery讀取XML文件數據并顯示的實現代碼
php解析XML文檔屬性并編輯的代碼
用JQuery 實現AJAX加載XML并解析的腳本
javascript Date對象處理時間的例子
PHP讀取XML的幾種方法
JavaScript 解析及讀取XML文檔的實例代碼
實例學習PHP操作XML的類DOMDocument

[關閉]
一分赛车计划app 黑龙江36选7 日本女优电影下载 四川时时彩 豌豆财富 吉林时时彩 老虎配资 期货配资 睿新配资 长盈宝配资 极电竞比分网 看黄a大片 捷报网球比分网