JQuery解析XML數(shù)據(jù)的幾個(gè)簡單實(shí)例
用JavaScript解析XML數(shù)據(jù)是常見的編程任務(wù),JavaScript能做的,JQuery當(dāng)然也能做。下面我們來總結(jié)幾個(gè)使用JQuery解析XML的例子。
第一種方案:
<script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://chabaoo.cn/cgi/test.xml', dataType: 'xml', success: function(data){ //console.log(data); $(data).find("channel").find("item").each(function(index, ele) { var titles = $(ele).find("title").text(); var links = $(ele).find("link").text(); console.log(titles+'-----'); $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>'); }); } }); }) </script> <div id="noticecon"> <ol> </ol> </div>
第二種方案:
<script type="text/javascript"> $.get("http://chabaoo.cn/cgi/test.xml", function(data){ $(data).find('channel').find('item').each(function(index, ele){ var titles = $(ele).find('title').text(); var links = $(ele).find('link').text(); $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>'); }) }); </script> <div id="noticecon"> <ol> </ol> </div>
一般步驟如下:
1. 讀取xml文件
$.get("xmlfile.xml",function(xml){ //xml即為可以讀取使用的內(nèi)容,具體讀取見第2點(diǎn) });
2. 讀取xml內(nèi)容
如果讀取的xml是來于xml文件,這結(jié)合上面的那點(diǎn),處理如下:
$.get("xmlfile.xml",function(xml){ $(xml).find("item").length; });
如果讀取的是xml字符串,則要注意一點(diǎn),xml字符串的必然被"<xml>"和"</xml>"包圍才可以被解析
$("<xml><root><item></item></root></xml>").find("item").length;
解析xml內(nèi)容:
示例xml:
<?xml version="1.0" encoding="utf-8" ?> <fields> <field Name="Name1"> <fieldname>dsname</fieldname> <datatype>字符</datatype> </field> <field Name="Name2"> <fieldname>dstype</fieldname> <datatype>字符</datatype> </field> </fields>
以下是解析示例代碼:
$(xml).find("field").each(function() { var field = $(this); var fName = field.attr("Name");//讀取節(jié)點(diǎn)屬性 var dataType = field.find("datatype").text();//讀取子節(jié)點(diǎn)的值 });
以上這篇JQuery解析XML數(shù)據(jù)的幾個(gè)簡單實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JQuery 改變頁面字體大小的實(shí)現(xiàn)代碼(實(shí)時(shí)改變網(wǎng)頁字體大小)
分別定義三個(gè)class為increaseFont、decreaseFont、resetFont 的元素。為其click事件添加事件2012-03-03jQuery EasyUI API 中文文檔 - Pagination分頁
jQuery EasyUI API 中文文檔 - Pagination分頁,使用jQuery EasyUI的朋友可以參考下。2011-09-09jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹
這篇文章主要介紹了jQuery異步上傳文件插件ajaxFileUpload詳細(xì)介紹,本文首先講解了ajaxFileUpload的參數(shù)、錯(cuò)誤提示等知識,然后給出了簡單使用實(shí)例和ASP.NET MVC模式下的使用實(shí)例,需要的朋友可以參考下2015-05-05解決jquery操作checkbox火狐下第二次無法勾選問題
在工作中使用jquery操作checkbox,進(jìn)行全選、反選,現(xiàn)在的問題是火狐下第二次無法勾選問題,在下面有個(gè)詳細(xì)的解答,感興趣的朋友可以參考下2014-02-02jquery實(shí)現(xiàn)簡單的自動(dòng)播放幻燈片效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單的自動(dòng)播放幻燈片效果,較為詳細(xì)的介紹了html頁面布局、css樣式設(shè)置及jQuery控制自動(dòng)播放幻燈的相關(guān)技巧,需要的朋友可以參考下2015-06-06多種JQuery循環(huán)滾動(dòng)文字圖片效果代碼
這篇文章主要為大家提供了多種JQuery循環(huán)滾動(dòng)文字圖片效果代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02