我不精通 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>
uj5u.com熱心網友回復：
由于您正在處理包含名稱空間的 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/359590.html