JQuery解析XML的方法小結(jié)
本文實(shí)例總結(jié)了JQuery解析XML的方法。分享給大家供大家參考,具體如下:
用JavaScript解析XML數(shù)據(jù)是常見(jiàn)的編程任務(wù),JavaScript能做的,JQuery當(dāng)然也能做。下面我們來(lái)總結(jié)幾個(gè)使用JQuery解析XML的例子。
第一種方案:
<script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://localhost/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://localhost/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)容,具體讀取見(jiàn)第2點(diǎn) });
2. 讀取xml內(nèi)容
如果讀取的xml是來(lái)于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)的值 });
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery操作xml技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery 解析xml文件
- JQuery解析HTML、JSON和XML實(shí)例詳解
- jQuery+ajax讀取并解析XML文件的方法
- 使用jquery解析XML的方法
- jQuery 行級(jí)解析讀取XML文件(附源碼)
- JQuery解析XML數(shù)據(jù)的幾個(gè)簡(jiǎn)單實(shí)例
- jquery解析XML字符串和XML文件的方法說(shuō)明
- jQuery解析返回的xml和json方法詳解
- 用JQuery 實(shí)現(xiàn)AJAX加載XML并解析的腳本
- Jquery Ajax解析XML數(shù)據(jù)(同步及異步調(diào)用)簡(jiǎn)單實(shí)例
- jQuery實(shí)現(xiàn)的解析本地 XML 文檔操作示例
相關(guān)文章
jQuery zTree搜索-關(guān)鍵字查詢 遞歸無(wú)限層功能實(shí)現(xiàn)代碼
這篇文章主要介紹了zTree搜索功能 -- 關(guān)鍵字查詢 -- 遞歸無(wú)限層的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01jquery動(dòng)態(tài)添加文本并獲取值的方法
下面小編就為大家?guī)?lái)一篇jquery動(dòng)態(tài)添加文本并獲取值的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10ajax 文件上傳應(yīng)用簡(jiǎn)單實(shí)現(xiàn)
今天看到一個(gè)jquery插件jquery.fileupload.v.1.5.0,自己試著結(jié)合java做了一個(gè)ajax的文件上傳小應(yīng)用2009-03-03用jQuery模擬頁(yè)面加載進(jìn)度條的實(shí)現(xiàn)代碼
因?yàn)槲覀儫o(wú)法通過(guò)任何方法獲取整個(gè)頁(yè)面的大小和當(dāng)前加載了多少,所以想制作一個(gè)加載進(jìn)度條的唯一辦法就是模擬。那要怎么模擬呢2011-12-12收集的10個(gè)免費(fèi)的jQuery相冊(cè)
或許在網(wǎng)絡(luò)上你已經(jīng)見(jiàn)過(guò)數(shù)百種通過(guò)jQuery實(shí)現(xiàn)的相冊(cè),但是我們發(fā)現(xiàn)的這些相冊(cè),他們有額外的東西,優(yōu)雅和獨(dú)特的創(chuàng)意!每個(gè)相冊(cè)都是可在線預(yù)覽和免費(fèi)下載的。你可以為你的Web項(xiàng)目添加色彩。2011-02-02jQuery實(shí)現(xiàn)級(jí)聯(lián)菜單效果(仿淘寶首頁(yè)菜單動(dòng)畫(huà))
今天我們就帶大家體會(huì)一下級(jí)聯(lián)菜單的顯示,只是實(shí)現(xiàn)了簡(jiǎn)單的效果,不過(guò)大都原理是一樣的2014-04-04jquery post方式傳遞多個(gè)參數(shù)值后臺(tái)以數(shù)組的方式進(jìn)行接收
在用jquery的post方式傳遞多個(gè)值時(shí),在后臺(tái)頁(yè)面可以用數(shù)組形式接收,很不錯(cuò)吧,可以接收多個(gè)值啊,接下來(lái)介紹實(shí)現(xiàn)方法,感興趣的朋友可以了解下哦2013-01-01輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建CRUD應(yīng)用
這篇文章主要幫大家輕松學(xué)習(xí)jQuery插件EasyUI,并利用EasyUI創(chuàng)建CRUD應(yīng)用,感興趣的小伙伴們可以參考一下2015-11-11