Question

我正在开发一个应用程序，只需点击一下按钮，该程序就会调用存储在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和解析并不了解什么是错的。你能帮忙吗？

Answer 1

使用此方法，因为您只有一个用于文档列表的子节点

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

Answer 2

注意：

使用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来执行上面的代码

Answer 3

我认为问题在于：

var xmlhttp = new HttpRequest();

应该是：

var xmlhttp = new XMLHttpRequest();

Answer 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>

解析XML文件不起作用

4 个答案: