快捷導(dǎo)航

JQuery解析XML數(shù)據(jù)的幾個(gè)簡(jiǎn)單實(shí)例

更新時(shí)間：2016年05月18日 10:54:55 投稿：jingxian

下面小編就為大家?guī)硪黄狫Query解析XML數(shù)據(jù)的幾個(gè)簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

用JavaScript解析XML數(shù)據(jù)是常見的編程任務(wù)，JavaScript能做的，JQuery當(dāng)然也能做。下面我們來總結(jié)幾個(gè)使用JQuery解析XML的例子。

第一種方案：

<script type="text/javascript">
$(document).ready(function() {
	$.ajax({
	 	url: 'http://www.fzitv.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>

第二種方案：

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

$.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è)簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用JQUERY進(jìn)行后臺(tái)頁面布局控制DIV實(shí)現(xiàn)左右式
一個(gè)網(wǎng)站的后臺(tái)使用frame框架來實(shí)現(xiàn)這種形式，這邊作者不是使用的frame而是純div進(jìn)行布局，下面看下具體的實(shí)現(xiàn)代碼
2014-01-01
JQuery操作Select的Options的Bug(IE8兼容性視圖模式)
JQuery在IE8兼容性視圖模式下操作Select的Options的Bug在本文進(jìn)行重現(xiàn)并給出詳細(xì)的解決方法，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助
2013-04-04
jQuery中animate()的使用方法及解決$(”body“).animate({“scrollTop”:top})
這篇文章主要介紹了關(guān)于jQuery中animate()的使用方法及解決$("body").animate({"scrollTop":top})不被Firefox支持的問題，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
2017-04-04
jqPlot 圖表中文API使用文檔及源碼和在線示例
今天我再來向大家介紹一款jquery圖表插件jqplot，下面是一些中文說明，希望對(duì)你有所幫助
2012-02-02
jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法
這篇文章主要介紹了jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法，需要的的朋友參考下吧
2017-01-01
Jquery 整理元素選取、常用方法一覽表
這篇文章主要介紹了Jquery 整理元素選取、常用方法一覽表的相關(guān)資料,這里整理了相關(guān)資料，便于大家查看，需要的朋友可以參考下
2016-11-11
jQuery中用on綁定事件時(shí)需注意的事項(xiàng)
本篇文章主要介紹了jQuery中用on綁定事件時(shí)需注意的事項(xiàng)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-03-03
js制作帶有遮罩彈出層實(shí)現(xiàn)登錄注冊(cè)表單特效代碼分享
這篇文章主要為大家詳細(xì)介紹了js制作帶有遮罩彈出層實(shí)現(xiàn)登錄注冊(cè)表單代碼特效，推薦給大家，有需要的小伙伴可以參考下。
2015-09-09
基于jQuery的checkbox全選問題分析
這篇文章主要介紹了基于jQuery的checkbox全選問題,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)全選功能中遇到的問題與相應(yīng)的解決方法,需要的朋友可以參考下
2016-11-11
Html5的placeholder屬性(IE兼容)實(shí)現(xiàn)代碼
Placeholder是HTML5新增的另一個(gè)屬性，當(dāng)input或者textarea設(shè)置了該屬性后，該值的內(nèi)容將作為灰字提示顯示在文本框中，當(dāng)文本框獲得焦點(diǎn)時(shí)，提示文字消失。以前要實(shí)現(xiàn)這效果都是用JavaScript來控制才能實(shí)現(xiàn) , firefox、google chrome等表示對(duì)其支持 , 唯獨(dú)IE不支持
2014-08-08