网页无法读取同目录XML文件实现产品ID编码搜索问题排查求助

问题原因 #

• 循环内节点引用逻辑错误：遍历的是product节点列表，应该从product[i]下读取子节点，原代码从未定义的Category[i]/Code[i]等变量读取内容，这是点击无响应的核心原因。
• 未处理XML命名空间：XML里所有产品属性节点都带product:前缀，直接用getElementsByTagName("Category")无法匹配到对应节点。
• 编码匹配逻辑问题：产品编码是111-11这种带横杠的格式，直接用parseInt转换会丢失横杠后的内容，导致匹配错误。
• 笔误：原代码读取UnitPrice的逻辑写错成了获取Category节点。
• 本地运行跨域限制：如果直接双击打开HTML文件，浏览器的同源策略会禁止fetch读取本地xml文件，需要用本地服务（比如VSCode的Live Server插件）启动运行。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品查询</title>
</head>
<body>
    <input type="text" id="Code" placeholder="输入产品编码，如111-11">
    <button type="button" onclick="loadData()">查询产品</button>
    <div id="results"></div>

    <script type="text/javascript">
        async function loadData(){
            try {
                const data = await fetch("product.xml")
                const parsedData = await data.text()
                const parser = new DOMParser();
                const ProductDoc = parser.parseFromString(parsedData,"text/xml");
                let results = ""
                const CodeInput = document.getElementById("Code").value.trim()
                const productList = ProductDoc.getElementsByTagName("product")
                // 命名空间和XML中定义的保持一致
                const ns = "index.html"

                for(let i = 0; i < productList.length; i++){
                    const currentProduct = productList[i]
                    const Category = currentProduct.getElementsByTagNameNS(ns, "Category")[0]?.textContent || ""
                    const Code = currentProduct.getElementsByTagNameNS(ns, "Code")[0]?.textContent || ""
                    const Name = currentProduct.getElementsByTagNameNS(ns, "Name")[0]?.textContent || ""
                    const Description = currentProduct.getElementsByTagNameNS(ns, "Description")[0]?.textContent || ""
                    const Quantity = currentProduct.getElementsByTagNameNS(ns, "Quantity")[0]?.textContent || ""
                    const UnitPrice = currentProduct.getElementsByTagNameNS(ns, "UnitPrice")[0]?.textContent || ""

                    if(!CodeInput || Code === CodeInput) {
                        results += `<div>
                        分类：${Category}，
                        编码：${Code}，
                        名称：${Name}，
                        描述：${Description}，
                        库存：${Quantity}，
                        单价：${UnitPrice}
                        </div><br/>`
                    }
                }
                document.getElementById("results").innerHTML = results || "<div>未找到匹配的产品</div>"
            } catch (err) {
                document.getElementById("results").innerHTML = `<div>加载失败：${err.message}</div>`
            }
        }
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Lee