2011年11月7日 星期一

jQuery使用AJAX與xml

最近在寫一個案子,因為有產品的列表,可是我手邊可以用的的主機不能使用資料庫,可是又想要能夠方便維護,於是我就想到xml,雖然公司這邊都是使用json去parse資料,可是因為另一個案子有需要用到xml,於是我就先使用xml,之後再看情況來使用json。

首先使用ajax把xml解開
$.ajax({
 url:'source.xml', //外部的xml檔
 type: 'GET',
 dataType: 'xml',
 success: parseXml
});
上面是一些常見的
url: 代表網址就不解釋了
type: http的請求狀態,通常不是post就是get
dataType: 預定從伺服器回傳的資料格式
success: 當呼叫成功執行的動作

如果想要傳送資料到後台,則可以使用data
data: {location: $('#location').val(), startTime: $('#start_time').text()}
之後到後台接資料就可以了
$location=$_GET['location']; $startTime=$_GET['startTime'];
此外還有一些可以使用:
cache: 如果不希望瀏覽器快取,可是設為false
error: 如果ajax呼叫錯誤回傳
complete: 資料傳輸完畢回傳,用這個就可以搭配loading效果來使用,當loading結束關閉loading動畫

想看更多的用法可以到jQuery Ajax看更多用法。

成功了就parseXml,把xml的結構解析出來在讓他變成html就可以了。
function parseXml(xml){
 $(xml).find("shoe").each(function(){
  var $shoe = $(this);
  var $num = $(this).find('num').text();
 });
}
如果要讀取label裡的id屬性
<label id="000" type="leisure" ...>
就用attr就可以了
$(this).attr('id')
如果想要取得xml內元素的數目,則使用$(節點).length就可以了

參考資料:
jQuery教學-jQuery讀取XML整合與應用
TIPS-神奇的jQuery XML查詢魔法
Reading XML with jQuery
Jquery Ajax解析XML数据
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...