XML转HTML表格失败，请求排查JavaScript代码问题

问题场景 #

尝试将给定XML数据通过JavaScript转换为HTML表格，但代码无法正常运行，以下是相关数据和代码：

XML数据 #

<xml>
  <0>
    <id>e1</id>
    <Product name>vivo Y11s 4G Smartphone, 32GB, 6.51 HD Display Phantom Black</Product name>
    <Price>197</Price>
    <Wireless carrier>Unlocked for All Carriers</Wireless carrier>
    <Brand>VIVO</Brand>
    <Color>Black</Color>
    <Memory>3 GB</Memory>
    <Screen size>6.51 Inches</Screen size>
    <Operating system/>
  </0>
  <1>
    <id>e3</id>
    <Product name>Nokia 2720 Flip 4G Official Australian Version 2019 Unlocked Basic Mobile Phone with Social Apps, Emergency Button, 28 Days Battery Standby and Google Assistant, Ocean Black, 2.8 inches</Product name>
    <Price>114</Price>
    <Wireless carrier>Unlocked for All Carriers</Wireless carrier>
    <Brand>Nokia</Brand>
    <Color>Ocean Black</Color>
    <Memory>4 GB</Memory>
    <Screen size/>
    <Operating system>KaiOS</Operating system>
  </1>
</xml>

原JavaScript代码 #

$("#electronic1Book").click(function(){
    $.ajax({
        type: "GET",
        url:"./API/electronic1API.php?range=0-200&search=",
        success: function(xml) {

            $tableData = "<tr>";
            $(xml).find("0,1,2,3").each(function() {
                console.log(xml);
                var id = $(this).find("id").text();
                var ProductName = $(this).find("Product name").text();
                var Price = $(this).find("Price").text();
                var WirelessCarrier = $(this).find("Wireless carrier").text();
                var Brand = $(this).find("Brand").text();
                var Color = $(this).find("Color").text();
                var Memory = $(this).find("Memory").text();
                var ScreenSize = $(this).find("Screen size").text();
                var OperatingSystem = $(this).find("Operating system").text();
                $tableData += "<tr><td>" + id + "</td>";
                $tableData += "<td>" + ProductName + "</td>";
                $tableData += "<td>" + Price + "</td>";
                $tableData += "<td>" + WirelessCarrier + "</td>";
                $tableData += "<td>" + Brand + "</td>";
                $tableData += "<td>" + Color + "</td>";
                $tableData += "<td>" + Memory + "</td>";
                $tableData += "<td>" + ScreenSize + "</td>";
                $tableData += "<td>" + OperatingSystem + "</td></tr>";
                console.log($tableData);
            });
            $("#electronic1-table").append($tableData);
        }
    });
})

故障原因及修复方案 #

1. XML标签命名违反语法规范 #

XML元素名称必须满足：

• 不能以数字开头（如<0>、<1>）
• 不能包含空格（如<Product name>、<Wireless carrier>）

修复：修改XML标签为合法名称，例如：

<xml>
  <item>
    <id>e1</id>
    <ProductName>vivo Y11s 4G Smartphone, 32GB, 6.51 HD Display Phantom Black</ProductName>
    <Price>197</Price>
    <WirelessCarrier>Unlocked for All Carriers</WirelessCarrier>
    <Brand>VIVO</Brand>
    <Color>Black</Color>
    <Memory>3 GB</Memory>
    <ScreenSize>6.51 Inches</ScreenSize>
    <OperatingSystem/>
  </item>
  <item>
    <id>e3</id>
    <ProductName>Nokia 2720 Flip 4G Official Australian Version 2019 Unlocked Basic Mobile Phone with Social Apps, Emergency Button, 28 Days Battery Standby and Google Assistant, Ocean Black, 2.8 inches</ProductName>
    <Price>114</Price>
    <WirelessCarrier>Unlocked for All Carriers</WirelessCarrier>
    <Brand>Nokia</Brand>
    <Color>Ocean Black</Color>
    <Memory>4 GB</Memory>
    <ScreenSize/>
    <OperatingSystem>KaiOS</OperatingSystem>
  </item>
</xml>

2. jQuery选择器匹配错误 #

• 原代码用$(xml).find("0,1,2,3")无法匹配数字开头的非法标签，修改XML后改为$(xml).find("item")即可遍历所有商品项。
• 带空格的标签选择器$(this).find("Product name")会被解析为查找<Product>下的<name>子元素，而非目标标签，修改标签名后直接用$(this).find("ProductName")即可正确匹配。

3. 表格HTML结构错误 #

• 初始化$tableData = "<tr>"会导致最终HTML多出一个空的<tr>，破坏表格结构，应直接初始化空字符串，或者先拼接表头行。
• 循环内每次拼接完整的<tr>行即可。

4. AJAX未指定数据类型 #

未设置dataType: "xml"可能导致jQuery无法将响应正确解析为XML对象，需在AJAX配置中添加该参数。

修正后的JavaScript代码 #

$("#electronic1Book").click(function(){
    $.ajax({
        type: "GET",
        url: "./API/electronic1API.php?range=0-200&search=",
        dataType: "xml", // 指定响应数据类型为XML
        success: function(xml) {
            let tableData = "";
            // 遍历所有item标签
            $(xml).find("item").each(function() {
                const id = $(this).find("id").text();
                const productName = $(this).find("ProductName").text();
                const price = $(this).find("Price").text();
                const wirelessCarrier = $(this).find("WirelessCarrier").text();
                const brand = $(this).find("Brand").text();
                const color = $(this).find("Color").text();
                const memory = $(this).find("Memory").text();
                const screenSize = $(this).find("ScreenSize").text() || "-";
                const operatingSystem = $(this).find("OperatingSystem").text() || "-";

                // 拼接表格行
                tableData += `<tr>
                    <td>${id}</td>
                    <td>${productName}</td>
                    <td>${price}</td>
                    <td>${wirelessCarrier}</td>
                    <td>${brand}</td>
                    <td>${color}</td>
                    <td>${memory}</td>
                    <td>${screenSize}</td>
                    <td>${operatingSystem}</td>
                </tr>`;
            });
            // 插入到表格中（建议先清空原有内容再添加）
            $("#electronic1-table").html(tableData);
        },
        error: function(xhr, status, error) {
            console.error("AJAX请求失败:", error);
        }
    });
})

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