在jquery中处理带有命名空间的XML数据


Posted in Javascript onJune 13, 2011

但不幸的是,很多服务返回的数据仍然是XML格式的。
jquery对于xml这种数据的处理是内置支持的,这一点没有任何问题。但前提是返回的数据没有带任何命名空间。例如下面这份数据

<?xml version="1.0" encoding="utf-8" ?> 
<data> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
<Employee id="1" firstName="ares" lastName="chen"></Employee> 
</data>

要处理这样的数据,jquery代码大致如下
var div = $("#placeholder"); 
// 处理不带命名空间的xml 
$.get("data.xml", null, function (data) { 
var employees = $("Employee", data); //找到所有的Employee节点 
var ul = $("<ul />"); 
employees.each(function () { 
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);// 将每一行数据构造一个新的li标签,并且将其插入到ul中 
}); 
ul.appendTo(div); 
});

但如果我们的XML数据带有命名空间,则上述代码就会无效。原因是因为jquery默认处理不了命名空间\
<?xml version="1.0" encoding="utf-8" ?> 
<data xmlns:d="http://tech.xizhang.com"> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
<d:Employee id="1" firstName="bill" lastName="gates"></d:Employee> 
</data>

为了解决这个问题,有热心的网友,编写了一个jquery插件,叫做jquery.xmlns.js,有兴趣可以通过下面了解和下载
http://www.rfk.id.au/blog/entry/xmlns-selectors-jquery/
那么,我们可以用如下的方法来解决问题
$.xmlns["d"] = "http://tech.xizhang.com"; 
// 处理带命名空间的xml 
$.get("datawithnamespace.xml", null, function (data) { 
var employees = $("d|Employee", data); //找到所有的Employee节点 
var ul = $("<ul />"); 
employees.each(function () { 
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul); 
}); 
ul.appendTo(div); 
});

不得不说,XML这个技术规范中的命名空间真是一个很不好的设计。增加了很多麻烦,胜过于它带来的好处。
本文的例子完整代码如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery.xmlns.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(function () { 
var div = $("#placeholder"); 
// 处理不带命名空间的xml 
$.get("data.xml", null, function (data) { 
var employees = $("Employee", data); //找到所有的Employee节点 
var ul = $("<ul />"); 
employees.each(function () { 
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul);// 将每一行数据构造一个新的li标签,并且将其插入到ul中 
}); 
ul.appendTo(div); 
}); 
$("<br />").appendTo(div); 
$.xmlns["d"] = "http://tech.xizhang.com"; 
// 处理带命名空间的xml 
$.get("datawithnamespace.xml", null, function (data) { 
var employees = $("d|Employee", data); //找到所有的Employee节点 
var ul = $("<ul />"); 
employees.each(function () { 
$("<li />").text($(this).attr("firstName") + " " + $(this).attr("lastName")).appendTo(ul); 
}); 
ul.appendTo(div); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="placeholder"> 
</div> 
</form> 
</body> 
</html>

最后,在浏览器中看到的效果如下。有图有真相

在jquery中处理带有命名空间的XML数据

Javascript 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
jquery 与NVelocity 产生冲突的解决方法
Jun 13 #Javascript
用Juery网页选项卡实现代码
Jun 13 #Javascript
读jQuery之三(构建选择器)
Jun 11 #Javascript
读jQuery之二(两种扩展)
Jun 11 #Javascript
读jQuery之一(对象的组成)
Jun 11 #Javascript
基于jquery的无刷新分页技术
Jun 11 #Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 #Javascript
You might like
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP里的单例类写法实例
2015/06/25 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
js图片处理示例代码
2014/05/12 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
高级护理专业大学生求职信
2013/10/24 职场文书
机关门卫制度
2014/02/01 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书