显示XML文件中的数据

我正在尝试使用JavaScript来显示XML文件中的数据。我的数据没有显示到网页，我不知道为什么。显示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>

来源

2016-10-22 Hudson Mckie

http://www.w3schools.com/xml/tryit.asp?filename=tryajax_xml2 – Mahi

我试图用这个，只是交换XML文件，并改变所得到没有工作的元素。 –

1 ==>'onclick =“loadXml（）;”''而不是'onclick =“displayXml（）”'2 ==>在'xmlData = XMLhttp.responseXML;'后添加'displayXml（xmlData）'并且测试 –

<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>

来源

2016-10-22 16:58:10

我有相同的代码，但它说没有找到数据库。是因为我的脚本在头标而不是身体？ –

没有尝试设置XMLhttp.open（“GET”，文件名，true）;'而不是假的 –

和文件url必须是正确的，并在同一个域 –

你不使用var XMLDATA，而不是您使用的是无功xmlDataBase。你的代码替换到：

CdElements = xmlData.getElementsByTagName("CD");

而且，由于您使用的是全局变量XMLDATA，它的可用displayXml函数内部，在这种情况下没有必要功能displayXml（xmlDataBase）如果你使用函数displayXml（），它会足够。

来源

2016-10-22 17:08:33 user1973469

'xmlDataBase'参数不可变，这不是问题 –

我做了更改，数据仍然没有显示。 –

使用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>

来源

2016-10-22 17:22:21

显示XML文件中的数据

回答

相关问题