Question

我在w3school上找到了一个代码，该代码应以表格格式显示xml文件。我正在尝试使用我的文件进行此操作，但无法获取。

我的代码：

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

   <button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
   <br><br>
    <table id="demo"></table>


   <script>
   function loadXMLDoc() {
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
  myFunction(this);
   }
   };
   xmlhttp.open("GET", "https://newfmplayer.online/AirPlayHistory.xml",       true);
  xmlhttp.send();
 }
 function myFunction(xml) {
 var i;
   var xmlDoc = xml.responseXML;
  var table="<tr><th>name</th><th>Song title</th></tr>";
  var x = xmlDoc.getElementsByTagName("Song");
  for (i = 0; i <x.length; i++) { 
   table += "<tr><td>" +
    x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
   "</td><td>" +
   x[i].getElementsByTagName("Song title")[0].childNodes[0].nodeValue +
   "</td></tr>";
    }
   document.getElementById("demo").innerHTML = table;
 }
 </script>

</body>
</html>

链接到我的文件：https://newfmplayer.online/AirPlayHistory.xml 来自w3schools的原始代码：https://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table

Answer 1

实际上，在您的xml文件中，属性包含值。在w3school示例中，节点本身包含值。因此，基本上，您需要访问节点属性，而不是节点（元素）本身。

跟随This link on w3school访问属性：

示例：

<!DOCTYPE html>
<html>
<head>
<title>Testing XMLHttpRequest</title>
<style type="text/css">
  table,th,td {border : 1px solid black; border-collapse: collapse; }
   th,td { padding: 5px; }
</style>
<script type="text/javascript">
    function loadXMLDoc() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                myFunction(this);
            }
        };
        xmlhttp.open("GET", "AirPlayHistory.xml", true);
        xmlhttp.send();
    }
    function myFunction(xml) {
        var i;
        var xmlDoc = xml.responseXML;
        var table = "<tr><th>name</th><th>Song title</th></tr>";
        var songTitles = xmlDoc.getElementsByTagName("Song");
        var artistNames = xmlDoc.getElementsByTagName("Artist");
        for (i = 0; i < songTitles.length; i++) {
            table += "<tr><td>" + artistNames[i].attributes.getNamedItem("name").nodeValue + "</td><td>" + 
                    songTitles[i].attributes.getNamedItem("title").nodeValue + "</td></tr>";
        }
        document.getElementById("demo").innerHTML = table;
    }
</script>
</head>
<body>
    <button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
    <br/><br/>
    <table id="demo"></table>
</body>
</html>

XML文件显示

1 个答案: