用ajax加载xml内容
[英]Loading xml content with ajax
问题描述
好的，所以我有以下html文件：
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadDoc()">Get the names</button>
<br>
<br>
<table id="demo"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", "names.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = "<tr><th>Names</th></tr>";
var x = xmlDoc.getElementsByTagName("Names");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
以及以下包含名称的xml文件：
<?xml version="1.0" encoding="UTF-8" ?>
<Names>
<Name>Alex</Name>
<Name>Anna</Name>
<Name>Eva</Name>
<Name>George</Name>
<Name>Jason</Name>
<Name>John</Name>
<Name>Lisa</Name>
<Name>Mary</Name>
<Name>Michael</Name>
<Name>Nick</Name>
<Name>Vicky</Name>
</Names>
我想要的是以某种方式从xml文件中获取名称，并将其存储在数组中，然后打印它们。但是由于某些原因，只有正确存储了名字（“ Alex”）。我不知道我做错了什么有人可以帮我吗？ 我敢打赌myFunction(xml)出了点问题，但我找不到/修复它
2 个解决方案
解决方案1
2 2016-05-22 18:57:10
只有一个Names标签，因此您的循环将只执行一次。
我会遍历Name标签。
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = "<tr><th>Names</th></tr>";
var x = xmlDoc.getElementsByTagName("Name");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].childNodes[0].nodeValue;
}
document.getElementById("demo").innerHTML = table;
}
解决方案2
1 已采纳 2016-05-22 18:57:12
您需要检查以下内容：
var x = xmlDoc.getElementsByTagName("Names"); // Get the Names node.
var data = x[0].getElementsByTagName("Name"); // Get the Name node.
(function() { function myFunction(xml) { var i; var xmlDoc = (new window.DOMParser()).parseFromString(xml, "text/xml"); var table = "<tr><th>Names</th></tr>"; var x = xmlDoc.getElementsByTagName("Names"); var data = x[0].getElementsByTagName("Name"); for (i = 0; i < data.length; i++) { table += "<tr><td>" + data[i].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; } var xml = "<?xml version=\\"1.0\\" encoding=\\"UTF-8\\" ?><Names> <Name>Alex</Name> <Name>Anna</Name> <Name>Eva</Name> <Name>George</Name> <Name>Jason</Name> <Name>John</Name> <Name>Lisa</Name> <Name>Mary</Name> <Name>Michael</Name> <Name>Nick</Name> <Name>Vicky</Name></Names>"; myFunction(xml); })();
<table id="demo"></table>
Ajax帮助加载内容
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.