1

ボタンをクリックすると、プログラムが XML ファイルに保存されている情報を呼び出し、<span>JavaScript を使用してタグに表示するアプリを開発しています。

    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 と解析に本当に (まったく新しい) ので、何が問題なのかわかりません。助けていただけますか？

4

4 に答える 4

2

ノート：

  1. getElementsByTagNameを使用する
  2. xmlにdocumentListタグがありません

  3. タグドキュメントは、document_listではなくxml内の唯一の配列です

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

上記のコードを実行するには、iddocumentList1でスパンをもう1つ追加します

于 2013-03-20T12:20:18.577 に答える
2

documentlist の子ノードが 1 つしかないため、これを使用します

document.getElementById("documentList").innerHTML = xmlDoc.getElementByTagName("documentList")[0].childNodes[0].nodeValue;
document.getElementById("documentList").innerHTML = xmlDoc.getElementByTagName("documentList")[1].childNodes[0].nodeValue;
于 2013-03-20T12:03:09.590 に答える
1

問題は次のとおりだと思います。

var xmlhttp = new HttpRequest();

そのはず：

var xmlhttp = new XMLHttpRequest();
于 2013-03-20T11:59:35.490 に答える
0

各ドキュメントの情報を表示する場合は、次のようにします。

<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>
于 2013-03-20T13:12:19.777 に答える