如何将xml页面链接到html页面?

时间:2018-07-06 18:38:39

标签: javascript html xml

我正在尝试将xml页面链接到html页面。我收到一条错误消息,指出该函数未定义。

我也无法弄清楚如何在代码中添加数学方程式。根据营业税,我想得到价格的7%。在“总价”下,我想将营业税和帐面价格加在一起。

这是XML文件:

<root>
    <books>
        <book>
            <title>Cryptonomicon</title>
            <author>Neal Stephenson</author>
            <ISBN>978-0060512804</ISBN>
            <price>8.99</price>
            <publisher>CS2</publisher>
            <salesTax></salesTax>
            <totalPrice></totalPrice>

        </book>
        <book>
            <title>American Gods</title>
            <author>Neil Gaiman</author>
            <ISBN>978-0060558123</ISBN>
            <price>10.17</price>
            <publisher>CS2</publisher>
            <salesTax></salesTax>
            <totalPrice></totalPrice>
        </book>
    </books>
</root>

这是HTML文件:

<html>

<head>
    <title>AJAX Example</title>
    <script language="javascript" type="text/javascript">

        var httpRequest = null;

        function doRequest() {
            if (window.XMLHttpRequest) {
                httpRequest = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (httpRequest == null) alert("Error creating request object!");
            var url = "books.xml";
            httpRequest.open("GET", url, true);
            httpRequest.onreadystagechange = updatePage;
            httpRequest.send(null);
        }

        function updatePage() {
            if (httpRequest.readyState == 4) {

                var bookList = httpRequest.responseXML;
                var bookTable="<table border='1'>";

                var booksXML = httpRequest.responseXML;
                var books = booksXML.documentElement.getElementsByTagName("book");

                bookTable += "<tr><td>Title</td><td>Author</td><td>ISBN</td><td>Price</td><td>Publisher</td><td>Sales Tax</td><td>Total Price</td></tr>";

                for (i = 0; i < books.length; i++) {
                    bookTable += "<tr>";

                    bookTitle = books[i].getElementsByTagName("title");
                    bookTable += "<td>" + bookTitle[0].firstChild.nodeValue + "</td>";

                    bookAuthor = books[i].getElementsByTagName("author");
                    bookTable += "<td>" + bookAuthor[0].firstChild.nodeValue + "</td>";

                    bookISBN = books[i].getElementsByTagName("ISBN");
                    bookTable += "<td>" + bookISBN[0].firstChild.nodeValue + "</td>";

                    bookPrice = books[i].getElementsByTagName("price")
                    bookTable += "<td>" + bookPrice[0].firstChild.nodeValue + "</td>";
              
                    bookPublisher = books[i].getElementsByTagName("publisher");
                    bookTable += "<td>" + bookpublisher[0].firstChild.nodeValue + "</td>";

                    bookSalesTax = books[i].getElementsByTagName("salesTax")
                    bookTable += "<td>" + booksalesTax[0].firstChild.nodeValue + "</td>";        

                    bookISBN = books[i].getElementsByTagName("ISBN");
                    bookTable += "<td>" + bookISBN[0].firstChild.nodeValue + "</td>";

                    bookTotalPrice = books[i].getElementsByTagName("totalPrice")
                    bookTable += "<td>" + booktotalPrice[0].firstChild.nodeValue + "</td>";
                    
                    bookTable += "</tr>";

                    }
                    bookTable += "</table>";

                    document.getElementById('bookList').innerHTML=bookTable;
                }
            }                     
    </script>
</head>

<body>
    <h1>AJAX Example</h1>
    <div id="books">
        <form method="GET">
            <input value="Show Me the Books!" type="button" onClick="doRequest();" />
        </form>
    </div>
</body>

</html>

0 个答案:

没有答案