快捷導(dǎo)航

jquery解析xml字符串示例分享

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

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