我想要迭代 XML 文件并在 HTML 网页上显示字段中的数据。目前,我的代码仅显示 XML 文件中的第一个条目。
这是我当前的 HTML/JS 代码,它显示 XML 文件中的第一个条目。这是一个 html 文件:
<script>
displayCD(0);
function displayCD(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this, i);
}
};
xmlhttp.open("GET", "data.xml", true);
xmlhttp.send();
}
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("contact");
document.getElementById("showCD").innerHTML =
"Name: " +
x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
"<br>Email: " +
x[i].getElementsByTagName("email")[0].childNodes[0].nodeValue +
"<br>Phone: " +
x[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue;
}
</script>
<div id='showCD'></div><br>
这是我的 XML 代码,位于单独的文件 data.xml 中:
<?xml version="1.0" encoding="UTF-8"?>
<entries>
<contact>
<name>a</name>
<email>b</email>
<phone>1234</phone>
</contact>
<contact>
<name>c</name>
<email>d</email>
<phone>5678</phone>
</contact>
</entries>
当前输出:
名称:a
电子邮件:b
电话:1234
预期输出:
名称:a
电子邮件:b
电话:1234
姓名:c
电子邮件:d
电话:5678
最佳答案
你只需要循环x
(代表所有 <contact>
标签:
x = xmlDoc.getElementsByTagName("contact");
for (count = 0; count < x.length; count++) {
document.getElementById("showCD").innerHTML +=
"Name: " +
x[count].getElementsByTagName("name")[0].childNodes[0].nodeValue +
"<br>Email: " +
x[count].getElementsByTagName("email")[0].childNodes[0].nodeValue +
"<br>Phone: " +
x[count].getElementsByTagName("phone")[0].childNodes[0].nodeValue;
}
附注正如有人在评论中提到的,使用 XSLT 可能是完成此任务的一种更简洁的方法,尽管如果您以前没有使用过它,会有一些学习曲线。
关于javascript - 如何使用 JavaScript 迭代 XML 文件并在 HTML 网页中显示数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60988963/