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 相关文章推荐
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
小程序云开发之用户注册登录
May 18 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
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
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
python 实现客户端与服务端的通信
2020/12/23 Python
授权委托书格式模板
2014/04/03 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
企业员工辞职信范文
2015/05/12 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
详解python网络进程
2021/06/15 Python
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA