我无法让我的网页从同一文件夹内的 xml 文件中提取数据
Posted
技术标签:
【中文标题】我无法让我的网页从同一文件夹内的 xml 文件中提取数据【英文标题】：I cant get my webpage to pull data from an xml file inside the same folder 【发布时间】：2021-12-28 04:49:43 【问题描述】：我不精通 javascript 和 xml，但我正在尝试创建一个网页，我可以在其中通过 ID 代码过滤产品来搜索 xml 文件上的产品。我已经尝试了很多东西，但我没有收到错误，当我点击搜索时没有任何反应。任何关于我哪里出错的帮助将不胜感激，因为老实说我几乎不知道我在做什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vendor</title>
</head>
<body>
<input type="number" id="Code">
<button type="button" name="button" onclick="loadData()">Get Product</button>
<div id="results">
</div>
<script type="text/javascript">
async function loadData()
var data = await fetch("product.xml")
var parsedData = await data.text()
var parser = new DOMParser();
var ProductDoc = parser.parseFromString(parsedData,"text/xml");
var results = ""
var CodeInput = parseInt(document.getElementById("Code").value)
var product = ProductDoc.getElementsByTagName("product")
for(var i = 0; i < product.length; i++)
var Category = Category[i].getElementsByTagName("Category")[0].childNodes[0].nodeValue
var Code = Code[i].getElementsByTagName("Code")[0].childNodes[0].nodeValue
var Name = Name[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue
var Description = Description[i].getElementsByTagName("Description")[0].childNodes[0].nodeValue
var Quantity = Quantity[i].getElementsByTagName("Quantity")[0].childNodes[0].nodeValue
var UnitPrice = UnitPrice[i].getElementsByTagName("Category")[0].childNodes[0].nodeValue
if(isNaN(CodeInput) || CodeInput == parseInt(Code))
results += "<div>"
+ "Category: " + Category
+ ", Code: " + Code
+ ", Name: " + Name
+ ", Description: " + Description
+ ", Quantity: " + Quantity
+ ", UnitPrice: " + UnitPrice
+ "</div><br/>"
document.getElementById("results").innerHTML = results
</script>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<main xmlns:product="index.html">
<product>
<product:Category>example</product:Category>
<product:Code>111-11</product:Code>
<product:Name>example</product:Name>
<product:Description>example</product:Description>
<product:Quantity>example</product:Quantity>
<product:UnitPrice>example</product:UnitPrice>
</product>
<product>
<product:Category>example</product:Category>
<product:Code>122-22</product:Code>
<product:Name>example</product:Name>
<product:Description>example</product:Description>
<product:Quantity>example</product:Quantity>
<product:UnitPrice>example</product:UnitPrice>
</product>
</main>
<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified" targetNamespace="index.html" xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="Category" type="xs:string" />
<xs:element name="Code" type="xs:string" />
<xs:element name="Name" type="xs:string" />
<xs:element name="Description" type="xs:string" />
<xs:element name="Quantity" type="xs:string" />
<xs:element name="UnitPrice" type="xs:string" />
</xs:schema>
【问题讨论】：
【参考方案1】：由于您正在处理包含名称空间的 xml 文档，因此使用带有名称空间解析器的 xml 解析器来解析它会更安全。以下内容应该让您足够接近您正在寻找的内容：
let parser = new DOMParser(),
ProductDoc = parser.parseFromString(parsedData, "application/xml"),
evaluator = new XPathEvaluator(),
resolver = evaluator.createNSResolver(ProductDoc),
results = "",
products = ProductDoc.evaluate('//product', ProductDoc, resolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (let i = 0; i < products.snapshotLength; i++)
let tags = ProductDoc.evaluate('.//product:*', products.snapshotItem(i), resolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
new_div = "<div>"
for (let i = 0; i < tags.snapshotLength; i++)
new_div += `$tags.snapshotItem(i).localName: $tags.snapshotItem(i).textContent <br/>`
results += `$new_div</div><br/>`
document.getElementById("results").innerHTML = results
【讨论】：
以上是关于我无法让我的网页从同一文件夹内的 xml 文件中提取数据的主要内容，如果未能解决你的问题，请参考以下文章