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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
vue element el-transfer增加拖拽功能
Jan 15 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
详细分析React 表单与事件
2020/07/08 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python 文件操作的详解及实例
2017/09/18 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python中存取文件的4种不同操作
2018/07/02 Python
实例讲解Python3中abs()函数
2019/02/19 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
财务部总监岗位职责
2014/03/12 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
单位实习介绍信
2015/05/05 职场文书
起诉书范文
2015/05/20 职场文书
七年级作文之英语老师
2019/10/28 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python