Question

这里我尝试使用AJAX调用返回的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解码部分。

更新了输出：

Answer 1

看起来问题在于你的桌子的建设。当您不需要并且分号太多时，您正在关闭<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>";
}

您可以在此图片中看到代码存在的问题：

无法从XML数据中完全填充HTML表

1 个答案: