javascript - 使用ajax加载xml内容

标签 javascript html ajax xml

好的,我有以下 html 文件:

<!DOCTYPE html>
<html>
<style>
  table,
  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th,
  td {
    padding: 5px;
  }
</style>

<body>

  <button type="button" onclick="loadDoc()">Get the names</button>
  <br>
  <br>
  <table id="demo"></table>

  <script>
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          myFunction(xhttp);
        }
      };
      xhttp.open("GET", "names.xml", true);
      xhttp.send();
    }

    function myFunction(xml) {
      var i;
      var xmlDoc = xml.responseXML;
      var table = "<tr><th>Names</th></tr>";
      var x = xmlDoc.getElementsByTagName("Names");
      for (i = 0; i < x.length; i++) {
        table += "<tr><td>" +
          x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
      }
      document.getElementById("demo").innerHTML = table;
    }
  </script>

</body>

</html>

以及以下包含名称的 xml 文件:

<?xml version="1.0" encoding="UTF-8" ?>
<Names>
  <Name>Alex</Name>
  <Name>Anna</Name>
  <Name>Eva</Name>
  <Name>George</Name>
  <Name>Jason</Name>
  <Name>John</Name>
  <Name>Lisa</Name>
  <Name>Mary</Name>
  <Name>Michael</Name>
  <Name>Nick</Name>
  <Name>Vicky</Name>
</Names>

我想要的是以某种方式从 xml 文件中获取名称并将它们存储在数组中,然后打印它们。但由于某种原因,只有第一个名称被正确存储(“Alex”)。我不明白我是什么做错了。有人可以帮助我吗?我敢打赌 myFunction(xml) 有问题,但我无法找到/修复它

最佳答案

只有一个 Names 标记,因此您的循环只会执行一次。
我将改为循环 Name 标签。

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table = "<tr><th>Names</th></tr>";
  var x = xmlDoc.getElementsByTagName("Name");
  for (i = 0; i < x.length; i++) {
    table += "<tr><td>" +
      x[i].childNodes[0].nodeValue;
  }
  document.getElementById("demo").innerHTML = table;
}

关于javascript - 使用ajax加载xml内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37377892/

相关文章:

javascript - Selenium:检查当前窗口是私有(private)窗口还是普通窗口?

javascript - 如何使用 Perl 和 Javascript 创建和访问 json 文件

php - 显示多个词的搜索结果

php - 如何在 Blade 中循环 Ajax 响应

javascript - 我可以在 Javascript 中动态更新计算输出吗?

javascript - 根据用户输入修改雷达 Chart.js 中的值

javascript - 简单的 JavaScript OnClick 函数

html - 更改悬停中的文本效果

html - Google 字体的 IE8 文本阴影问题

javascript - PHP Ajax 调用结束时刷新当前页面