使用 jQuery 获取 XML 数据以在 HTML 上显示时遇到问题答案

【问题标题】：Trouble getting XML data to show on HTML using jQuery使用 jQuery 获取 XML 数据以在 HTML 上显示时遇到问题
【发布时间】：2016-06-13 18:34:37
【问题描述】：

我正在开发我的新 PC 构建网站，但我无法让具有特定属性的 XML 标记显示在我的 HTML <p> 元素中。我的 XML 如下所示：

<?xml version="2016.6" encoding="UTF-8"?>
<parts>
  ...
  <HDDs>
    <hdd id="1">
      <name>DiskOne</name>
      <price>50</price>
    </hdd>
    <hdd id="2">
      <name>DiskTwo</name>
      <price>40</price>
    </hdd>
  </HDDs>
  ...
</parts>

我想在上面的 XML 中找到带有属性 id="2" 的标签 <hdd>，并在 HTML <p> 元素中显示其子元素的 name 内容，该元素具有 id="test-xml"。我使用这个 jQuery 代码从 XML 中获取数据并在 <p> 中显示：

  function loadHDDs(name)
  {
    $.ajax({
      type: "GET",
      url: 'data/parts.xml',
      dataType: "xml",
      success: parseHDDsXml
    });
  }
  function parseHDDsXml(xml, name)
  {
    $(xml).find('hdd[id="2"]').each(function(){
      var name;

      name = $(this).children('name').text();

      $("#test-xml").text(name);
    });
  }

我在另一个网站上找到了代码，我真的不知道，我需要在loadHDDs之后的括号中写什么，所以我写了name。我不知道如何在页面加载时干净利落地执行脚本，所以我在页面上的<body> 元素中添加了onload="loadHDDs();"。我使用 Google Chrome 调试器来查找错误。当我在本地测试我的页面时，在我的计算机上，调试器当然显示XMLHttpRequest cannot load。我将我的项目上传到服务器，并且在 Chrome 调试器中根本没有收到任何错误，但 <p> 元素中的文本不会更改为 XML 文本。我究竟做错了什么？也许我的脚本有问题？还是 XML 文档？也许我只是不知道执行 jQuery 脚本和 onload 只是不起作用？请帮我！我是 jQuery 和 Javascript 的初学者，所以我恳请您向我展示解决问题的最简单和最容易理解的方法。

提前致谢！

编辑：我没有足够的声誉发表评论。我按照 Nayeri 的建议在我的 Ajax 中添加了 error 函数，现在我收到一个错误，指出 loadHDDs 未定义。我不明白。我们可以在我的脚本中清楚地看到function loadHDDs(name)。我已经检查了一百次拼写。

【问题讨论】：

标签： javascript jquery html xml xmlhttprequest

【解决方案1】：

将错误函数添加到您的 ajax 以查看您的错误：

$.ajax({
  type: "GET",
  url: 'data/parts.xml',
  dataType: "xml",
  success: parseHDDsXml,
  error : function (a,b,c){
    console.log(a, b, c)
  }
});

那么你的 xml 文件似乎是错误的，所以删除你的 xml 文件的 <?xml version="2016.6" encoding="UTF-8"?> 行

【讨论】：

@Gustas 如果你有一个外部 js 文件，你的 html 页面找不到你的 js 文件，所以检查你的