彩票走势图

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

转帖|其它|编辑:郝浩|2011-08-31 14:20:44.000|阅读 455 次

概述:如果你在做AJAX应用,则你可能经常会用到jquery(或者其他框架)处理服务返回的数据。如果用Jquery处理Json格式,将是相当方便的。但不幸的是,很多服务返回的数据仍然是XML格式的。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

  如果你在做AJAX应用,则你可能经常会用到jquery(或者其他框架)处理服务返回的数据。如果用Jquery处理Json格式,将是相当方便的。但不幸的是,很多服务返回的数据仍然是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="//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=&quot;bill" lastName="gates"></d:Employee>

  </data>

  为了解决这个问题,有热心的网友,编写了一个jquery插件,叫做jquery.xmlns.js,有兴趣可以通过下面了解和下载

  //www.rfk.id.au/blog/entry/xmlns-selectors-jquery/

  那么,我们可以用如下的方法来解决问题

$.xmlns["d"] = "//tech.xizhang.com";
// 处理带命名空间的xml
$.get("datawithnamespace.xml", null, function (data) {
var employees = $(&quot;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" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>

  <html xmlns="//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"] = "//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>

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

  


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:博客园

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP