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 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
jQuery 阴影插件代码分享
2012/01/09 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
javascript常用函数(2)
2015/11/05 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
js继承实现方法详解
2016/12/16 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
python使用opencv驱动摄像头的方法
2018/08/03 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
企业治理工作自我评价
2013/09/26 职场文书
大学应届生的自我评价
2014/03/06 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
日元符号 ¥
2022/02/17 杂记
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏
python中urllib包的网络请求教程
2022/04/19 Python
TS 类型收窄教程示例详解
2022/09/23 Javascript