Javascript 在html文件中显示xml数据的内容无效_Javascript_Html_Xml

Javascript 在html文件中显示xml数据的内容无效

javascript html xml

Javascript 在html文件中显示xml数据的内容无效,javascript,html,xml,Javascript,Html,Xml,我想将XML文件的内容显示为html文件我已经看到并尝试了下面链接中显示的示例我创建了html文件，完全复制了该示例中的代码。下面是我的第一个html文件的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=""UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1"&

我想将XML文件的内容显示为html文件

我已经看到并尝试了下面链接中显示的示例

我创建了html文件，完全复制了该示例中的代码。下面是我的第一个html文件的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=""UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test 1oading xml</title>
</head>
<body>
<div id='content'>
    <table id="books" cellpadding="10px" style="text-align:left;">
        <thead>
            <tr><th>Author</th><th>Title</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<script>
    let xmlContent = '';
    let tableBooks = document.getElementById('books');
    fetch('books.xml').then((response)=>{
        response.text().then((xml)=>{

            xmlContent = xml;
            let parser = new DOMParser();
            let xmlDOM = parser.parseFromString(xmlContent, 'appliction/xml');
            let books = xmlDOM.querySelectorAll('book');

            books.forEach(bookXmlNode => { 
                let row = document.createElement('tr');

                //author
                let td = document.createElement('td');
                td.innerText = bookXmlNode.children[0].innerHTML;
                row.appendChild(td);

                //title
                let td = document.createElement('td');
                td.innerText = bookXmlNode.children[1].innerHTML;
                row.appendChild(td);        

                tableBooks.children[1].appendChild(row);

            });
        });
    });
</script>
</body>
</html>


测试1正在加载的xml
作者
让xmlContent=''；
让tableBooks=document.getElementById（'books'）；
fetch（'books.xml'）。然后（（响应）=>{
response.text（）。然后（（xml）=>{
xmlContent=xml；
让parser=newdomparser（）；
让xmlDOM=parser.parseFromString（xmlContent，'appliction/xml'）；
让books=xmlDOM.queryselectoral（'book'）；
books.forEach（bookXmlNode=>{
让row=document.createElement（'tr'）；
//作者
设td=document.createElement（'td'）；
td.innerText=bookXmlNode.children[0].innerHTML；
世界其他地区（td）；
//头衔
设td=document.createElement（'td'）；
td.innerText=bookXmlNode.children[1].innerHTML；
世界其他地区（td）；
tableBooks.children[1].appendChild（行）；
});
});
});

从此处复制了xml文件内容。。将文件另存为books.xml，保存在html文件的同一文件夹中。虽然理想情况下，我希望显示来自外部xml文件的数据，以便可以动态更新数据

当我打开html文件时，它没有显示xml数据

我也尝试了这个链接的代码

丹特也不工作

如何将（外部）xml文件的数据显示为html文件

检查页面的屏幕截图。最上面的一个是YouTube视频的代码

botom一个用于来自的代码

您的代码基本正确，但有一些打字错误。请尝试下面的代码，这对我很有用。正如其他评论者所提到的，你不能仅仅打开文件，你需要一个web服务器来提供它。您链接到的视频使用Visual Studio代码中的Live Server执行此操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="" UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test 1oading xml</title>
</head>
<body>
    <div id='content'>
        <table id="books" cellpadding="10px" style="text-align:left;">
            <thead>
                <tr>
                    <th>Author</th>
                    <th>Title</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script>
        let xmlContent = '';
        let tableBooks = document.getElementById('books');
        fetch('books.xml').then((response) => {
            response.text().then((xml) => {
                xmlContent = xml;
                let parser = new DOMParser();
                let xmlDOM = parser.parseFromString(xmlContent, 'application/xml');
                let books = xmlDOM.querySelectorAll('book');

                books.forEach(bookXmlNode => {
                    let row = document.createElement('tr');

                    //author
                    let td = document.createElement('td');
                    td.innerText = bookXmlNode.children[0].innerHTML;
                    row.appendChild(td);

                    //title
                    let td2 = document.createElement('td');
                    td2.innerText = bookXmlNode.children[1].innerHTML;
                    row.appendChild(td2);

                    tableBooks.children[1].appendChild(row);

                });
            });
        });
    </script>
</body>
</html>


测试1正在加载的xml
作者
标题
让xmlContent=''；
让tableBooks=document.getElementById（'books'）；
fetch（'books.xml'）。然后（（响应）=>{
response.text（）。然后（（xml）=>{
xmlContent=xml；
让parser=newdomparser（）；
让xmlDOM=parser.parseFromString（xmlContent，'application/xml'）；
让books=xmlDOM.queryselectoral（'book'）；
books.forEach（bookXmlNode=>{
让row=document.createElement（'tr'）；
//作者
设td=document.createElement（'td'）；
td.innerText=bookXmlNode.children[0].innerHTML；
世界其他地区（td）；
//头衔
设td2=document.createElement（'td'）；
td2.innerText=bookXmlNode.children[1].innerHTML；
第3行。追加子项（td2）；
tableBooks.children[1].appendChild（行）；
});
});
});

输入错误是：id=“books”，“application/xml”，并且不能将td作为变量名使用两次

顺便说一下，当您遇到这样的问题时，首先要查看的是浏览器的控制台窗口。在浏览器启动且无法显示您的数据后，点击F12，如果未选择，则转到控制台：它将显示所有错误及其来源。如果您使用的是VS代码，那么实际上您也可以调试脚本，这意味着你可以一步一步地查看它发生了什么。

你有

is='books'

而不是

id='books'

你不能定义一个已经用

let

定义的变量，你有

let td=…

两次在同一上下文中。你是在

文件：//

协议上运行这个吗？@Ritesh-是的文件：//protocol@full-堆栈：我更正的是id。还是没有，谢谢。这很有效。。。但当我使用web服务器运行时，我的代码也不起作用。我有一个问题。它能处理外部xml文件吗？它能处理与html文件位于同一文件夹中的外部xml文件，是的。我列出了我在上面编辑时对代码所做的更改：刷新页面并尝试以相同的方式更改代码。应该可以解决了。你好，很抱歉再次打扰你。我无法显示来自远程链接的内容。当我转到控制台时，我得到一个错误“请求的资源html上不存在‘访问控制允许来源’标题”错误，这是因为出于安全原因，从远程链接获取数据非常困难。为了解决这个问题，你需要一种叫做“跨来源资源共享”（CORS）的东西，互联网上有大量的信息。例如。最后，对于这种情况，只需将XML文件复制到与HTML文件相同的位置可能会更容易。有关解决方法的更多信息：