從 XML 文檔加載 HTML 表時遇到問題

Question

我無法從 XML 文件加載值並將它們插入 HTML 表中。 它說我試圖訪問的 html 標記是未定義的“script.js:15 Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined”。 我正在嘗試從加載的 XML 文件中將和的值插入 html 表中。

// script.js

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            myFunction(this);
        }
    };
    xmlhttp.open("GET", "table.xml", true);
    xmlhttp.send();
}
function myFunction() {
    var xmlDoc = XMLHttpRequest.responseXML;
    var table = '<tr><th>Name</th><th>Age</th></tr>';
    var x = xmlDoc.getElementsByTagName('STUDENT');
    for (i = 0; i < x.length; i++) {
        table += "<tr><td>" +
            x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("AGE")[0].childNodes[0].nodeValue +
            "</td></tr>";
    }
    document.getElementById("students") = table;
}

//relevant html
<body>
    <br><br>
    <table id="students"></table>
    <script src="script.js"></script>
</body>

//XML Doc Contents
<CLASS ID=”Advanced Web Development”>
    <STUDENT>
            <NAME>Tom</NAME>
            <AGE>19</AGE>
            <HEIGHT>1.3</HEIGHT>
            <SEX>M</SEX>
            <GRADE>B</GRADE>
        </STUDENT>
    <STUDENT>
            <NAME>Dick</NAME>
            <AGE>29</AGE>
            <HEIGHT>1.1</HEIGHT>
            <SEX>M</SEX>
            <GRADE>A</GRADE>
        </STUDENT>
    <STUDENT>
            <NAME>Harry</NAME>
            <AGE>39</AGE>
            <HEIGHT>1.5</HEIGHT>
            <SEX>M</SEX>
            <GRADE>C</GRADE>
        </STUDENT>
    <STUDENT>
            <NAME>Mary</NAME>
            <AGE>30</AGE>
            <HEIGHT>1.1</HEIGHT>
            <SEX>F</SEX>
            <GRADE>B+</GRADE>
        </STUDENT>
</CLASS>

Answer 1

似乎有一些事情你沒有在這里做：

首先， XMLHttpRequest class 沒有responseXML屬性：這不是獲取異步請求結果的地方。 相反， responseXML屬性屬於單個XMLHttpRequest對象（或“實例”）。 您在var xmlhttp = new XMLHttpRequest();行中的變量xmlhttp中創建一個新的XMLHttpRequest實例； ，它將是包含responseXML屬性的xmlhttp 。

此外，您在onreadystatechange處理程序中將this的值傳遞給myFunction ，但myFunction不使用任何 arguments。 JavaScript 對調用具有正確數量的 arguments 的函數有非常寬松的限制：任何多余的 arguments 都會被忽略。

嘗試更改此 function 的前幾行

function myFunction() {
    var xmlDoc = XMLHttpRequest.responseXML;

至

function myFunction(result) {
    var xmlDoc = result.responseXML;

這允許myFunction接收xmlhttp實例並從中提取響應 XML 。

其次，在 function 的末尾你寫：

document.getElementById("students") = table;

您的變量table包含一個表示表內容的 HTML 字符串。 但是，您不能將元素設置為 HTML 字符串。 相反，您要做的是使用元素的innerHTML屬性將此 HTML 字符串分配給此元素的內部 HTML ：

document.getElementById("students").innerHTML = table;

最后，您在問題中包含的 XML 文檔格式不正確，因為根元素的ID屬性在應該使用中性引號 ( " ) 時使用智能引號 ( ” ) 包圍該值。如果 XML格式不正確， result的responseXML屬性將為null 。

我對您的代碼進行了這些更改並且它起作用了，因為我可以加載 XML 並用 XML 文件中的數據填寫表格。

從 XML 文檔加載 HTML 表時遇到問題

問題描述

1 個解決方案

解決方案1
0 已采納 2020-04-21 21:11:32

從 XML 文檔加載 HTML 表時遇到問題

問題描述

1 個解決方案

解決方案1 0 已采納 2020-04-21 21:11:32

解決方案1
0 已采納 2020-04-21 21:11:32