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

本文介绍如何使用jQuery处理带有命名空间的XML数据。通过一个插件jquery.xmlns.js,可以轻松选择带命名空间的元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这一篇记录一个小技巧。

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

jquery对于xml这种数据的处理是内置支持的,这一点没有任何问题。但前提是返回的数据没有带任何命名空间。例如下面这份数据


 "1.0" encoding="utf-8" ?>

  
  
   "1" firstName=
   "ares" lastName=
   "chen">
  
  
  
   "1" firstName=
   "ares" lastName=
   "chen">
  
  
  
   "1" firstName=
   "ares" lastName=
   "chen">
  
  
  
   "1" firstName=
   "ares" lastName=
   "chen">
  
  
  
   "1" firstName=
   "ares" lastName=
   "chen">
  
  
  
   "1" firstName=
   "ares" lastName=
   "chen">
  
  
  
   "1" firstName=
   "ares" lastName=
   "chen">
  
  
  
   "1" firstName=
   "ares" lastName=
   "chen">
  

要处理这样的数据,jquery代码大致如下

            var div = $("#placeholder");

            

            // 处理不带命名空间的xml
            $.get("data.xml", null, function (data) {
                var employees = $("Employee", data); //找到所有的Employee节点

                var ul = $("
  
    "
    ); employees.each(function () { $("
    • "
    ).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 = $("
      
      "
      ); employees.each(function () { $("
      • "
      ).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>
          
          
      评论
      添加红包

      请填写红包祝福语或标题

      红包个数最小为10个

      红包金额最低5元

      当前余额3.43前往充值 >
      需支付:10.00
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明:

      1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

      余额充值