如何解析从 url 返回的这个 xml？答案

【问题标题】：How can I parse this xml returned from a url?如何解析从 url 返回的这个 xml？
【发布时间】：2013-11-20 14:53:00
【问题描述】：

我的 url 有以下 xml 返回：

<?xml version="1.0"?>
<categories>
  <category>
    <catid>17</catid>
    <name>Collage</name>
    <parent></parent>
  </category>
  <category>
    <catid>15</catid>
    <name>Letter Mats</name>
    <parent></parent>
  </category>
  <category>
    <catid>182</catid>
    <name>Single Opening</name>
    <parent></parent>
  </category>
</categories>

还有我的 javascript 代码：

var matte_select_options = new Array();
function matte_designs_populate_types()
{
  $(document).ready(function()
  {
    $.ajax({
      type: "GET",
      url: "myurl/system/components/catsxml/3",
      dataType: 'xml',
      success: function(xml) {
        designs = xml.getElementsByTagName("categories")[0].childNodes;
        var output = [];
        alert(designs.length);
        for (i = 0; i < designs.length; i++)
        {
          var catid = designs[i].getAttribute("catid");
          var name = designs[i].getAttribute("name");
          output.push('<option value="'+ catid +'">'+ name +'</option>');
          matte_select_options[catid] = name;
        }

        $('#matte_designs').html(output.join(''));
      }
    });
  });
}

由于某种原因，警报给了我 7，我不知道为什么。但主要问题是 select 没有填充，因为 catid 和 name 甚至都没有设置。

【问题讨论】：

标签： javascript jquery ajax xml

【解决方案1】：

您可以将返回的 XML 转换为 jQuery 对象，然后像往常一样使用 jQuery 的 DOM 遍历函数。试试这个：

success: function(xml) {
    var output = [];
    $('category', xml).each(function(i, el) {
        var catid = $("catid", this).text();
        var name = $("name", this).text();
        output.push($('<option />', { value: catid, text: name }));
        matte_select_options[catid] = name;
    });
    $('#matte_designs').html(output);
}

Example fiddle

【讨论】：

没问题，很高兴为您提供帮助
@RoryMcCrossan 你不推荐使用jquery.parseXML吗？

【解决方案2】：

在您的 xml 示例中：catid 和 name 不是属性。它们是节点，信息包含在它们的内容中。

如果您使用jQuery，您应该能够使用jQuery 选择器和操纵器解析xml：

success: function(xml) {
    var designs = $(xml).find('category');
    var output = [];

    designs.each(function(){
        var catid = $(this).find('catid').text();
        var name = $(this).find('name').text();
        output.push('<option value="'+ catid +'">'+ name +'</option>');
        matte_select_options[catid] = name;
    });

    $('#matte_designs').html(output.join(''));
  }

【讨论】：