顯示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文件中的數據

回答

相關問題