无法从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表格

回答

相关问题