gpt4 book ai didi

javascript - 读取本地 XML 文件进行解析

转载 作者:行者123 更新时间:2023-11-30 14:12:46 25 4
gpt4 key购买 nike

我正在尝试制作一个 XML 解析器,但我在加载本地文件时遇到困难。

问题是,当我尝试从本地驱动器加载时,它仍会在同一域中查找文件。我收到的错误是这样的。

Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/Users/username/Documents/catalog.xml

HTML/JS: ( http://jsfiddle.net/5dfhz40j/ )

<!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()">Load</button>
<br><br>
<table id="myTable"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlFunction(this);
}
};
xhttp.open("GET", "/Users/username/Documents/catalog.xml", true);
xhttp.send();
}
function xmlFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Category</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("ITEM");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("myTable").innerHTML = table;
}
</script>
</body>
</html>

XML 文件:

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<ITEM>
<TITLE>TITLE01</TITLE>
<CATEGORY>CAT01</CATEGORY>
<ID>ID01</ID>
</ITEM>
<ITEM>
<TITLE>TITLE02</TITLE>
<CATEGORY>CAT02</CATEGORY>
<ID>ID02</ID>
</ITEM>
<ITEM>
<TITLE>TITLE03</TITLE>
<CATEGORY>CAT03</CATEGORY>
<ID>ID03</ID>
</ITEM>
<ITEM>
<TITLE>TITLE04</TITLE>
<CATEGORY>CAT04</CATEGORY>
<ID>ID04</ID>
</ITEM>
<ITEM>
<TITLE>TITLE05</TITLE>
<CATEGORY>CAT05</CATEGORY>
<ID>ID05</ID>
</ITEM>
</CATALOG>

预期输出:

enter image description here

最佳答案

该错误意味着您正在尝试从 JSFiddle 加载文件,但它在 JSFiddle 上不存在并且它无法访问您的本地文件,因为 origin不一样 查找 CORS

因此,您的代码应该可以在您的机器上正常运行,并且如果文件在该路径退出,则可以提供所需的输出。

作为外部公共(public)文件加载(我在这里使用来自 github 的文件):

运行代码片段

See working Plunkr

var xmlFile = 'https://raw.githubusercontent.com/olayenca/externals/master/XMLParse.xml';

function loadDoc() {
var xhttp = new XMLHttpRequest();

xhttp.open("GET", xmlFile, true);
xhttp.send();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
xmlFunction(this.response);
}
};

}

function xmlFunction(xml) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xml, "text/xml");
var table = "<tr><th>Category</th><th>Title</th><th>Subcategory</th></tr>"; //subcategory heading
var x = xmlDoc.getElementsByTagName("ITEM");
for (var elem of x) {
var titles = elem.getElementsByTagName(
"TITLE")[0].childNodes[0].nodeValue;
var cats = elem.getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue;
var subCats = elem.getElementsByTagName("SUBCATEGORY").length === 0 ? "..." : elem.getElementsByTagName("SUBCATEGORY")[0].childNodes[0].nodeValue;

table += "<tr><td>" + cats + "</td><td>" + titles + "</td><td>" + subCats + "</td></tr>";
}
document.getElementById("myTable").innerHTML = table;
}
loadDoc();
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 5px;
}
<table id="myTable"></table>

关于javascript - 读取本地 XML 文件进行解析,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54123409/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com