jquery解析xml字符串示例分享

更新時(shí)間：2014年03月25日 15:13:10 作者：

用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://www.test.net/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>

第二種方案：

復(fù)制代碼代碼如下:

<script type="text/javascript">
 $.get("http://www.test.net/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文件

復(fù)制代碼代碼如下:

$.get("xmlfile.xml",function(xml){    
 $(xml).find("item").length;    
});

2. 讀取xml內(nèi)容

如果讀取的xml是來(lái)于xml文件，這結(jié)合上面的那點(diǎn)，處理如下：

復(fù)制代碼代碼如下:

$.get("xmlfile.xml",function(xml){    
 $(xml).find("item").length;    
});

如果讀取的是xml字符串，則要注意一點(diǎn)，xml字符串的必然被"<xml>"和"</xml>"包圍才可以被解析

復(fù)制代碼代碼如下:

$("<xml><root><item></item></root></xml>").find("item").length;

解析xml內(nèi)容：

示例xml：

復(fù)制代碼代碼如下:

<?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>

以下是解析示例代碼：

復(fù)制代碼代碼如下:

$(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存取照片的具體實(shí)現(xiàn)方法
這篇文章介紹了用jquery存取照片的具體實(shí)現(xiàn)方法，需要的朋友可以參考一下
2013-06-06
JQuery 簡(jiǎn)便實(shí)現(xiàn)頁(yè)面元素?cái)?shù)據(jù)驗(yàn)證功能
JQuery 簡(jiǎn)便實(shí)現(xiàn)頁(yè)面元素?cái)?shù)據(jù)驗(yàn)證功能...
2007-03-03
jQuery中prev()方法用法實(shí)例
這篇文章主要介紹了jQuery中prev()方法用法,實(shí)例分析了prev()方法的功能、定義及取得匹配元素集合中每個(gè)元素緊鄰的前一個(gè)同輩元素使用技巧,需要的朋友可以參考下
2015-01-01
firefox下jQuery UI Autocomplete 1.8.*中文輸入修正方法
在FF下，切換到中文輸入法，再輸入中文，是不能立即自動(dòng)查詢，需要按下其他按鍵，比如CTRL，后來(lái)，通過(guò)修改源代碼即可修復(fù)這個(gè)問(wèn)題
2012-09-09
jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能
這篇文章主要介紹了jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
jquery+CSS實(shí)現(xiàn)的水平布局多級(jí)網(wǎng)頁(yè)菜單效果
這篇文章主要介紹了jquery+CSS實(shí)現(xiàn)的水平布局多級(jí)網(wǎng)頁(yè)菜單效果,涉及jquery頁(yè)面元素屬性動(dòng)態(tài)變換效果實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery使用animate創(chuàng)建動(dòng)畫(huà)用法實(shí)例
這篇文章主要介紹了jQuery使用animate創(chuàng)建動(dòng)畫(huà)用法,可實(shí)現(xiàn)點(diǎn)擊鏈接文字隱藏及顯示文字的功能,實(shí)例分析了jquery中toggle與animate方法的使用技巧,需要的朋友可以參考下
2015-08-08
jQuery簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
目前jQuery有1.x和2.x兩個(gè)主要版本，區(qū)別在于2.x移除了對(duì)古老的IE 6、7、8的支持，因此2.x的代碼更精簡(jiǎn)。選擇哪個(gè)版本主要取決于你是否想支持IE 6~8，下文給大分享jquery 簡(jiǎn)介的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2017-07-07
使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
使用jQuery UI的tooltip()函數(shù)，可以使懸浮提示框不再那么千篇一律，以下是完整的代碼，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-06-06
jquery+html5時(shí)鐘特效代碼分享（可設(shè)置鬧鐘并且語(yǔ)音提醒）
這篇文章主要為大家詳細(xì)介紹了Jquery+html5可設(shè)置鬧鐘并且會(huì)語(yǔ)音提醒的時(shí)鐘特效，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下
2015-08-08