从 XML 文档加载 HTML 表时遇到问题

我在从XML文件中加载值并将其插入HTML表时遇到问题。它说我尝试访问的html标签是未定义的"script.js：15未捕获的类型错误：无法读取未定义的属性'getElementsByTagName'"。我正在尝试从加载的 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>

您在这里似乎没有做一些事情：

首先，XMLHttpRequest类没有responseXML属性：这不是获取异步请求结果的位置。相反，responseXML属性属于单个XMLHttpRequest对象(或"实例")。在行var xmlhttp = new XMLHttpRequest();的变量xmlhttp中创建一个新的XMLHttpRequest实例，它将xmlhttp包含responseXML属性。

此外，您将onreadystatechange处理程序中的this值传递给myFunction，但myFunction不接受任何参数。 JavaScript 对调用具有正确参数数量的函数的限制非常宽松：任何多余的参数都会被忽略。

尝试将此函数的前几行从

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

自

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

这允许myFunction接收xmlhttp实例并从中提取响应 XML。

其次，在函数的末尾，您编写：

document.getElementById("students") = table;

变量table包含表示表内容的 HTML 字符串。但是，不能将元素设置为 HTML 字符串。相反，您要做的是使用此元素的innerHTML属性将此 HTML 字符串分配给此元素的内部 HTML：

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

最后，您在问题中包含的XML文档格式不正确，因为根元素的ID属性使用智能引号(”)将值括起来，而它应该使用中性引号(")代替。如果 XML 格式不正确，则result的responseXML属性将null。

我对代码进行了这些更改，并且它起作用了，因为我可以加载 XML 并使用 XML 文件中的数据填充表。

相关内容

最新更新

热门标签：