JQuery解析XML数据的几个简单实例

 更新时间:2016年05月18日 10:54:55   投稿:jingxian  
下面小编就为大家带来一篇JQuery解析XML数据的几个简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。

第一种方案:

<script type="text/javascript">
$(document).ready(function() {
	$.ajax({
	 	url: 'https://www.jb51.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("https://www.jb51.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即为可以读取使用的内容,具体读取见第2点
});

2. 读取xml内容

如果读取的xml是来于xml文件,这结合上面的那点,处理如下:

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

如果读取的是xml字符串,则要注意一点,xml字符串的必然被"<xml>"和"</xml>"包围才可以被解析

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

解析xml内容:

示例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");//读取节点属性
	var dataType = field.find("datatype").text();//读取子节点的值
});

以上这篇JQuery解析XML数据的几个简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JQuery 解析多维的Json数据格式

    JQuery 解析多维的Json数据格式

    对博客系统已经做到了博客评论模块部分了,对单篇博文进行静态化的同时对博文的评论部分采取AJAX的方式去读取。
    2009-11-11
  • JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)

    JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)

    分别定义三个class为increaseFont、decreaseFont、resetFont 的元素。为其click事件添加事件
    2012-03-03
  • jquery 缓存问题的几个解决方法

    jquery 缓存问题的几个解决方法

    在IE浏览器下,一般的ajax的方法都是cache等于true的,下面有几个不错的解决方法,感兴趣的朋友可以参考下
    2013-11-11
  • jQuery EasyUI API 中文文档 - Pagination分页

    jQuery EasyUI API 中文文档 - Pagination分页

    jQuery EasyUI API 中文文档 - Pagination分页,使用jQuery EasyUI的朋友可以参考下。
    2011-09-09
  • jQuery中值得注意的trigger方法浅析

    jQuery中值得注意的trigger方法浅析

    在前端页面开发中,我们有时候希望能自定执行一些人性化操作,比如鼠标不用点击自动就能点击等操作,利用传统的js语言需要编写复杂的代码才能实现此功能,这时候我们使用jquery的trigger()方法就能轻松实现。本文就给大家详细介绍了关于jQuery中值得注意的trigger方法。
    2016-12-12
  • jQuery异步上传文件插件ajaxFileUpload详细介绍

    jQuery异步上传文件插件ajaxFileUpload详细介绍

    这篇文章主要介绍了jQuery异步上传文件插件ajaxFileUpload详细介绍,本文首先讲解了ajaxFileUpload的参数、错误提示等知识,然后给出了简单使用实例和ASP.NET MVC模式下的使用实例,需要的朋友可以参考下
    2015-05-05
  • 解决jquery操作checkbox火狐下第二次无法勾选问题

    解决jquery操作checkbox火狐下第二次无法勾选问题

    在工作中使用jquery操作checkbox,进行全选、反选,现在的问题是火狐下第二次无法勾选问题,在下面有个详细的解答,感兴趣的朋友可以参考下
    2014-02-02
  • jquery实现简单的自动播放幻灯片效果

    jquery实现简单的自动播放幻灯片效果

    这篇文章主要介绍了jquery实现简单的自动播放幻灯片效果,较为详细的介绍了html页面布局、css样式设置及jQuery控制自动播放幻灯的相关技巧,需要的朋友可以参考下
    2015-06-06
  • 基于jquery的$.ajax async使用

    基于jquery的$.ajax async使用

    默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行
    2011-10-10
  • 多种JQuery循环滚动文字图片效果代码

    多种JQuery循环滚动文字图片效果代码

    这篇文章主要为大家提供了多种JQuery循环滚动文字图片效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论