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


Posted in Javascript onMay 18, 2016

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

第一种方案:

<script type="text/javascript">
$(document).ready(function() {
	$.ajax({
	 	url: 'https://3water.com/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://3water.com/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数据的几个简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
js indexOf()定义和用法
Oct 21 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
js密码强度实时检测代码
Mar 02 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
JavaScript设计模式开发中组合模式的使用教程
May 18 #Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 #Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 #Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 #Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 #Javascript
Jquery跨域获得Json的简单实例
May 18 #Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 #Javascript
You might like
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
php中return的用法实例分析
2015/02/28 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
Python生成pdf文件的方法
2014/08/04 Python
python提示No module named images的解决方法
2014/09/29 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
基于Python fminunc 的替代方法
2020/02/29 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
收银出纳员岗位职责
2014/02/23 职场文书
本科生自荐信
2014/06/18 职场文书
医德医魂心得体会
2014/09/11 职场文书
安全第一课观后感
2015/06/18 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
妇产科护理心得体会
2016/01/22 职场文书
优质护理心得体会
2016/01/22 职场文书
php引用传递
2021/04/01 PHP
使用python创建股票的时间序列可视化分析
2022/03/03 Python