無法從XML數據中完整填充HTML表格

這裏我想用AJAX調用返回的XML數據填充HTML表格。無法從XML數據中完整填充HTML表格

我在這裏的問題是我無法完全填充HTML表格。由於我對AJAX非常陌生，我無法弄清楚XML解釋如何工作以及如何解碼錯誤的根本原因。

這裏是我的網頁代碼

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style> 
     table, th, td 
     { 
      border: 1px solid black; 
      border-collapse: collapse; 
     } 
     th, td 
     { 
      padding: 5px; 
     } 
    </style> 
</head> 
<body> 
    <h1>Enter Book Details</h1><br> 

    <form method="post" action="http://localhost:8080/mysql/glarimy/lib/addbook" onsubmit="myButton.disabled = true; return true;"> 
     Title :<br> <input type = "text" name = "title" ><br> 
     Author :<br><input type = "text" name = "author" ><br> 
     Price : <br><input type = "text" name = "price" ><br> 
     No. of Pages :<br><input type="text" name = "pages" ><br> 
     <input type = "submit" id="submit" value = "Add Book"> 
     <input type = "reset" value ="Reset"><br><br> 
    </form> 

    <button onclick = "location.href = 'http://localhost:8080/mysql/glarimy/lib/getall'" type = "button">Get all book data in XML</button> 
    <button type="button" onclick="loadXMLDoc()">Get all books data </button> 
    <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", "http://localhost:8080/mysql/glarimy/lib/getall", true); 
      xmlhttp.send(); 
     } 
     function myFunction(xml) 
     { 
      var i; 
      var xmlDoc = xml.responseXML; 
      var table="<tr><th>ISBN</th><th>Title</th><th>Author</th><th>Price</th><th>No. of Pages</th></tr>"; 
      var x = xmlDoc.getElementsByTagName("book"); 
      for (i = 0; i < x.length; i++) 
      { 
       table += "<tr><td>" + 
       x[i].getElementsByTagName("isbn")[0].childNodes[0].nodeValue + 
       "</td><td>" + 
       x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + 
       "</td><td>"; 
       x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue + 
       "</td></td>"; 
       x[i].getElementsByTagName("pages")[0].childNodes[0].nodeValue + 
       "</td><td>" + 
       x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue + 
       "</td><tr>"; 
      } 
      document.getElementById("demo").innerHTML = table; 
     } 
    </script> 
</body> 
</html>

我從AJAX調用獲取XML數據如下

<books> 
    <book>  
      <author>mark</author> 
      <isbn>1</isbn> 
      <pages>500</pages> 
      <price>2000.0</price> 
      <title>java</title> 
    </book> 
    <book> 
      <author>john</author> 
      <isbn>2</isbn> 
      <pages>100</pages> 
      <price>1000.0</price> 
      <title>advancedjava</title> 
    </book> 
    <book> 
      <author>paul</author> 
      <isbn>3</isbn> 
      <pages>500</pages> 
      <price>500.0</price> 
      <title>tomcat</title> 
    </book> 
    <book> 
      <author>jack</author> 
      <isbn>4</isbn> 
      <pages>1000</pages> 
      <price>5000.0</price> 
      <title>rest</title> 
    </book> 
</books>

我得到的輸出是 Click Here

誰能給我解釋一下AJAX代碼是如何工作的？我無法找出那個XML解碼部分。

更新的輸出：

來源

2016-11-09 Sarath Raja

你的for循環中，要添加的行表根據是不正確的順序'var table'所以這就是表中的項目順序錯誤的問題 –

@KevinKloet請你詳細說明你的評論嗎？我對問題做了一些更改，請檢查一次。 –

即使在for循環中編輯之後，最後2個'td'添加到表格中也是相反的，'ISBN，標題，作者，價格，頁數'是'var table'和'ISBN中的順序，標題，作者，頁數，價格'是for循環中的順序。 –

它看起來像這個問題是你的表的建設。當您不需要並且分號過多時，您正在關閉<tr>標籤。這是修復：

for (i = 0; i < x.length; i++) 
{ 
    table += "<tr><td>" + 
    x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue + 
    "</td><td>" + 
    x[i].getElementsByTagName("isbn")[0].childNodes[0].nodeValue + 
    "</td><td>"+ 
    x[i].getElementsByTagName("pages")[0].childNodes[0].nodeValue + 
    "</td><td>" + 
    x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue + 
    "</td><td>"+ 
    x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + 
    "</td></tr>"; 
}

您可以在此圖像中看到你的代碼中的問題：

來源

2016-11-09 12:44:44 Dekel

@mplungjan，感謝您的編輯:) – Dekel

您確定這是確切的代碼？請注意，你有一個分號（';'），你應該在那裏刪除... – Dekel

這是我犯的一個愚蠢的錯誤。但即使我改變它後，我沒有得到5列數據，只有兩列正在顯示。檢查我在問題中所做的修改。 –

無法從XML數據中完整填充HTML表格

回答

相關問題