解析 XML 文件不起作用答案

【问题标题】：Parsing XML Files doesn't work解析 XML 文件不起作用
【发布时间】：2013-03-09 12:05:08
【问题描述】：

我正在开发一个应用程序，点击一个按钮，程序会调用存储在 XML 文件中的信息，以使用 JavaScript 显示在 <span> 标记中；

    function viewXMLFiles() {

        console.log("viewXMLFiles() is running");

        var xmlhttp = new HttpRequest();
            xmlhttp.open("GET", "TestInfo.xml", false);
            xmlhttp.send;

        console.log("still running");

        var xmlDoc = xmlhttp.responseXML;

        console.log("getting tired");

        document.getElementById("documentList").innerHTML = xmlDoc.getElementByTagName("documentList")[0].childNodes[0].nodeValue;
        document.getElementById("documentList").innerHTML = xmlDoc.getElementByTagName("documentList")[1].childNodes[1].nodeValue;

        console.log("done");
    }

然后是调用它的 HTML（以及显示 XML 文件的位置）；

<button onclick = "viewXMLFiles();">View Document Info</button><br>

<span id = "documentList">
    <!--This is where the XML will be loaded into-->
</span>

XML 文件是；

<document_list>

<document>

    <document_name>Holidays.pdf</document_name>

    <file_type>.pdf</file_type>

    <file_location></file_location>

</document>

<document>

    <document_name>iPhone.jsNotes.docx</document_name>

    <file_type>.docx</file_type>

    <file_location></file_location>

</document>

</document_list>

在控制台中，出现第一条消息，但没有任何反应，仅此而已。但我真的（就像，真的新）对 XML 和解析，不明白什么是错的。你能帮忙吗？

【问题讨论】：

你尝试过使用 XMLHttpRequest 吗？
我在哪里说new HttpRequest？
好的，我试过了，现在它在 document.getElementById... 行上中断了
var xmlhttp = new HttpRequest();
是的，我在你的最后两行中发现了问题..看看我的回答，告诉我它是否有效..

标签： javascript html xml xml-parsing

【解决方案1】：

我认为问题出在：

var xmlhttp = new HttpRequest();

应该是：

var xmlhttp = new XMLHttpRequest();

【讨论】：

好的，非常感谢 - 这行得通，但现在 JavaScript 的最后两行出现了问题：S 你能看到问题吗？

【解决方案2】：

使用这个是因为你只有一个文档列表的子节点

document.getElementById("documentList").innerHTML = xmlDoc.getElementByTagName("documentList")[0].childNodes[0].nodeValue;
document.getElementById("documentList").innerHTML = xmlDoc.getElementByTagName("documentList")[1].childNodes[0].nodeValue;

【讨论】：

让我们continue this discussion in chat

【解决方案3】：

注意：

使用 getElementsByTagName
您的 xml 中没有 documentList 标签

标记文档是 xml 中唯一的数组，而不是 document_list

function viewXMLFiles() {

  console.log("viewXMLFiles() is running");

  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET","TestInfo.xml",false);
  xmlhttp.send();
  xmlDoc = xmlhttp.responseXML; 

  console.log("still running");


  var getData = xmlDoc.getElementsByTagName("document");
  console.log("getting tired");

  document.getElementById("documentList").innerHTML = getData[0].getElementsByTagName("document_name")[0].childNodes[0].nodeValue;
  document.getElementById("documentList1").innerHTML = getData[1].getElementsByTagName("document_name")[0].childNodes[0].nodeValue;

    console.log("done");
}

再添加一个id为documentList1的span来执行上面的代码

【讨论】：

好的，非常感谢，这很有效，但我一直在寻找它来显示 XML 文件中的所有内容。我需要为文件中的其他标签重复document.getElementById("documentList").innerHTML = getData[0].getElementsByTagName("document_name")[0].childNodes[0].nodeValue; document.getElementById("documentList1").innerHTML = getData[1].getElementsByTagName("document_name")[0].childNodes[0].nodeValue; 行吗？
是的，您应该对文件中的每个标签重复
您应该对标签 document_name、file_type 和 file_location 重复，但您可以使用 for 循环来获取文档标签下的元素。我的意思是 for 循环而不是 getData[0]、getData[1]。 ...等

【解决方案4】：

如果你想显示每个文档的信息，你会想要这样的：

<html>
<head>

<script type="text/javascript">
function getMyXML() {

  console.log("viewXMLFiles() is running");

  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET","TestInfo.xml",false);
  xmlhttp.send();
  xmlDoc = xmlhttp.responseXML; 

  console.log("still running");

  console.log("getting tired");

  document.getElementById("docname").innerHTML = xmlDoc.getElementsByTagName("document_name")[0].childNodes[0].nodeValue;
  document.getElementById("filetype").innerHTML = xmlDoc.getElementsByTagName("file_type")[0].childNodes[0].nodeValue;

  document.getElementById("docname2").innerHTML = xmlDoc.getElementsByTagName("document_name")[1].childNodes[0].nodeValue;
  document.getElementById("filetype2").innerHTML = xmlDoc.getElementsByTagName("file_type")[1].childNodes[0].nodeValue;

    console.log("done");
}
</script>
</head>
<body>

<input type="button" onclick="getMyXML();" value="Get XML" />

<div id="doclist">
<h2>Document 1</h2>
<label>Docname: </label><span id="docname"></span><br/>
<label>Filetype: </label><span id="filetype"></span><br/>

</div>

<div id="doclist">
<h2>Document 2</h2>
<label>Docname: </label><span id="docname2"></span><br/>
<label>Filetype: </label><span id="filetype2"></span><br/>
</div>

</body>

【讨论】：