Heim > Web-Frontend > js-Tutorial > 在jquery中处理带有命名空间的XML数据_jquery

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

WBOY
Freigeben: 2016-05-16 18:06:03
Original
1047 Leute haben es durchsucht

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

复制代码 代码如下:













要处理这样的数据,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默认处理不了命名空间\
    复制代码 代码如下:

















    为了解决这个问题,有热心的网友,编写了一个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这个技术规范中的命名空间真是一个很不好的设计。增加了很多麻烦,胜过于它带来的好处。
      本文的例子完整代码如下
      复制代码 代码如下:


















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

      image

      Verwandte Etiketten:
      Quelle:php.cn
      Erklärung dieser Website
      Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
      Beliebte Tutorials
      Mehr>
      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage