Javascript 在HTML中显示XML

在我的index.html文件中，我创建了各种类似的列表（从

供应商一号

到

供应商七号

）：

没有糖果供应
没有糖果供应
没有糖果供应
没有糖果供应
没有糖果供应
没有糖果供应

然后我使用php将XML文件（test.XML）上传到一个文件夹：uploads/。XML文件中的示例如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<sweet_data>
<title>sweet data</title>
    <sweet id="2">
    <vendor_one>
        <name>Twixta</name>
        <start_time>9.00am</start_time>
        <end_time>10.45am</end_time>
    </vendor_one>
    </sweet >
    <sweet id="3">
    <vendor_one>
        <name>Beunos</name>
        <start_time>10.45am</start_time>
        <end_time>12.45pm</end_time>
    </vendor_one>
    </sweet >
    <sweet id="4">
    <vendor_one>
        <name>Mars</name>
        <start_time>12.45pm</start_time>
        <end_time>2.30pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="5">
    <vendor_one>
        <name>Thunderball</name>
        <start_time>2.30pm</start_time>
        <end_time>4.45pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="6">
    <vendor_one>
        <name>Egg Tastic</name>
        <start_time>4.45pm</start_time>
        <end_time>6.45pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="7">
    <vendor_one>
        <name>Fruity Tubes</name>
        <start_time>6.45pm</start_time>
        <end_time>8.45pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="8">
    <vendor_one>
        <name>Rainbows</name>
        <start_time>8.45pm</start_time>
        <end_time>11.00pm</end_time>
    </vendor_one>
    </sweet>
</sweet_data>

甜蜜数据
特维斯塔
上午9点
上午10时45分
贝努诺斯
上午10时45分
下午12时45分
火星
下午12时45分
下午二时三十分
雷球
下午二时三十分
下午四时四十五分
蛋味
下午四时四十五分
下午6时45分
果管
下午6时45分
下午8时45分
彩虹
下午8时45分
晚上11:00

如何执行以下操作：

使用“上载”文件夹中的test.xml文件

在xml文件中、每行中以及 删除“无糖果可用”文本

如果可能，让XML文件中的

开始

和

结束

时间影响

li的长度

---

以下是一些可能会有所帮助的起点：

首先，您将在服务器端将XML解析为JSON（我假设使用PHP）。这些是实现这一目标的起点：

一旦PHP完成了这项工作，就需要将JavaScript指向它来获取JSON。您可以通过使用AJAX来实现。如果您已经在站点上使用jQuery，那么您可以使用

这样做，您将得到一个包含所有要在客户端更新的元素的数组，您只需对它们进行迭代，并根据它们的

id

替换每个

的内容

---

谷歌是你的朋友，你可以边走边查找更多细节：）

从解析器开始-你应该用php处理xml，并将json发送给JS以使用和更新HTML DOM。实际上@Ramy不需要添加json等层。他可以解析XML并将HTML列表输出到服务器端。如果您希望避免容易出错的编程解析，支持XML转换的库可能会有所帮助。对于XML转换，我相信当他说他想替换“没有糖果可用”时，他想在页面已经加载之后在客户端这样做。我猜他并不想替换HTML列表，而是想替换单个

li

元素。如果不是这样，那么您是正确的，直接返回HTML更好。

<?xml version="1.0" encoding="UTF-8"?>
<sweet_data>
<title>sweet data</title>
    <sweet id="2">
    <vendor_one>
        <name>Twixta</name>
        <start_time>9.00am</start_time>
        <end_time>10.45am</end_time>
    </vendor_one>
    </sweet >
    <sweet id="3">
    <vendor_one>
        <name>Beunos</name>
        <start_time>10.45am</start_time>
        <end_time>12.45pm</end_time>
    </vendor_one>
    </sweet >
    <sweet id="4">
    <vendor_one>
        <name>Mars</name>
        <start_time>12.45pm</start_time>
        <end_time>2.30pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="5">
    <vendor_one>
        <name>Thunderball</name>
        <start_time>2.30pm</start_time>
        <end_time>4.45pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="6">
    <vendor_one>
        <name>Egg Tastic</name>
        <start_time>4.45pm</start_time>
        <end_time>6.45pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="7">
    <vendor_one>
        <name>Fruity Tubes</name>
        <start_time>6.45pm</start_time>
        <end_time>8.45pm</end_time>
    </vendor_one>
    </sweet>
    <sweet id="8">
    <vendor_one>
        <name>Rainbows</name>
        <start_time>8.45pm</start_time>
        <end_time>11.00pm</end_time>
    </vendor_one>
    </sweet>
</sweet_data>