Question

我正在尝试使用JavaScript来显示XML文件中的数据。我的数据没有显示在网页上，我不知道为什么。

enter image description here

任何帮助/建议将不胜感激。我的代码显示在下面。

注意 - 我没有使用XML的经验，所以请注意我是全新的。

 <script>
    var xmlData;
    function loadXml () {
        var filename = "CDLibrary.xml";
        var XMLhttp = new XMLHttpRequest();
        XMLhttp.open("GET", filename, true);
        var ok = true;
        try {
            XMLhttp.send();
        }
        catch(err) {
            ok = false;
            alert ("Database not found");
        }
        if (ok) {
            xmlData = XMLhttp.responseXML;
            displayXml(xmlData);
        }
    }
    function displayXml () {
        var CdElements;
        var CdTitle;
        var count;
        CdElements = xmlData.getElementsByTagName("CD");
        for (count = 0; count < CdElements.length; count=count+1) {
            CdTitle = CdElements[count].getElementsByTagName("title");
            document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + CdTitle[0].childNodes[0].nodeValue + "</br>";
        }
    }
 </script>

</head>

<body>
    <div>
        <p id="output">
        </p>
        <p id="buttons">
            <input type="button" id="btnDisplay" value="Display CDs" onclick="loadXml();">
    </div>
</body>

Answer 1

    <html>
    <head><title>Import XML Data</title></head>
    <body>
        <div>
            <p id="output">
            </p>
            <p id="buttons">
                <input type="button" id="btnDisplay" value="Display CDs" onclick="loadXml()">
        </div>
<script>
        var xmlData;
        function loadXml () {
            var filename = "CDLibary.xml";
            var XMLhttp = new XMLHttpRequest();
            XMLhttp.open("GET", filename, true);
            var ok = true;
            try {
                XMLhttp.send();
            }
            catch(err) {
                ok = false;
                alert ("Database not found");
            }
            if (ok) {
                xmlData = XMLhttp.responseXML;
              displayXml(xmlData);
            }
        }
        function displayXml(xmlDataBase) {
            var CdElements;
            var CdTitle;
            var count;
            CdElements = xmlDataBase.getElementsByTagName("CD");
            for (count = 0; count < CdElements.length; count=count+1) {
                CdTitle = CdElements[count].getElementsByTagName("title");
                document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + CdTitle[0].childNodes[0].nodeValue + "</br>";
            }
        }
     </script>
    </body>
    </html>

Answer 2

您没有使用var xmlData，而是使用var xmlDataBase。将代码替换为：

CdElements = xmlData.getElementsByTagName("CD");

由于您使用的是全局var xmlData，因此它可以在displayXml函数中使用，在这种情况下，如果您使用displayXml（）函数则不需要函数displayXml（xmlDataBase）它将会是够了。

Answer 3

使用w3schools链接并更改一些信息并更改目录，我得到了它的工作。我正在关注的模板中一定有错误，谢谢大家的时间和精力。

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


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

  <script>
  function loadDoc() {
  var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
   }
   };
   xhttp.open("GET", "CDLibrary.xml", true);
   xhttp.send();
    }
   function myFunction(xml) {
   var i;
   var xmlDoc = xml.responseXML;
   var table="<tr><th>Artist</th><th>Title</th></tr>";
   var x = xmlDoc.getElementsByTagName("CD");
   for (i = 0; i <x.length; i++) {
   table += "<tr><td>" +
   x[i].getElementsByTagName("performer")[0].childNodes[0].nodeValue +
   "</td><td>" +
   x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
   "</td></tr>";
    }
    document.getElementById("demo").innerHTML = table;
    }
    </script>

    </body>
    </html>

显示XML文件中的数据

3 个答案: