Fatal编程技术网
  • javascript/
  • Javascript 无法从XML数据完全填充HTML表

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

javascript jquery ajax xml rest

Javascript 无法从XML数据完全填充HTML表,javascript,jquery,ajax,xml,rest,Javascript,Jquery,Ajax,Xml,Rest,在这里，我试图用AJAX调用返回的XML数据填充HTML表 我的问题是我无法完全填充HTML表。因为我对AJAX非常陌生，所以我无法理解XML解释是如何工作的，以及如何解码错误的根本原因 这是我的网页代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style>

在这里，我试图用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>


表，th，td
{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，td
{
填充物：5px；
}
输入书籍详细信息

标题：


作者：


价格：


页数：





以XML格式获取所有书籍数据
获取所有书籍数据
函数loadXMLDoc（）
{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）
{
if（this.readyState==4&&this.status==200）
{
我的职能（本）；
}
};
open（“GET”http://localhost:8080/mysql/glarimy/lib/getall“，对）；
xmlhttp.send（）；
}
函数myFunction（xml）
{
var i；
var xmlDoc=xml.responseXML；
var table=“ISBNTitleAuthorPriceNo.页数”；
var x=xmlDoc.getElementsByTagName（“账簿”）；
对于（i=0；i
我从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>




有人能解释一下AJAX代码是如何工作的吗？我无法找出XML解码部分


更新的输出：
看起来问题在于表格的构建。当您不需要并且分号过多时，您正在关闭一个
标记。这是修复方法：


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>";
}



for（i=0；i

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

根据
var table
，将行添加到表中的for循环的顺序不正确，因此这就是表中项目顺序错误的问题table@KevinKloet你能详细说明你的评论吗？我对我的问题做了一些更改，请检查一次。即使在您对for循环进行编辑后，添加到表中的最后2个
td
也会颠倒，
ISBN、标题、作者、价格、页数
是
var表
和
ISBN、标题、作者、页数的顺序，Price
是for循环中的顺序。@KevinKloet请检查新图像您确定这是正确的代码吗？请注意，您有一个分号（
；
），您应该在那里删除它……我犯了一个愚蠢的错误。但即使我更改了它，我也不会得到5列数据，只会显示两列。检查我在问题中所做的编辑。您的问题中仍有分号（编辑后）。仔细检查。这是我用于代码（）的引用，您指的是哪个分号？让我们从复制和粘贴（…）{…}
从我的答案到您的代码的整个
循环开始。