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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
vue 本地环境跨域请求proxyTable的方法
Sep 19 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之第七天
2006/10/09 PHP
缓存技术详谈―php
2006/12/14 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
js编写简易的计算器
2020/07/29 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
python实现的希尔排序算法实例
2015/07/01 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
留学推荐信写作指南
2014/01/25 职场文书
合作协议书格式
2014/08/19 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书