将XML内容提取为HTML

Question

我是HTML / JS的新手，所以希望您的专家在这里有一个小问题可以帮助我。 我有带有播放列表的html5音乐播放器，其内容当前在index.html文件中提到如下：

<div id="divListing">
    <ol id="olContents">
<li rel="http://www.abc.mp3"><strong>Song1</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcd.mp3"><strong>Song2</strong><a target="_blank" href=" ">Buy Song< /a><em>Artist2</em></li>
<li rel="http://www.abcde.mp3"><strong>Song3</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcdef.mp3"><strong>Song4</strong><a target="_blank" href=" ">Buy Song</a><em>Artist2</em></li>
    </ol>
</div>

我的目标是从XML文件中获取<li>项，这样我就不必每次都更新HTML文件，而是如果我更改了外部（像dropbox这样的）source上的字符串。相同的语法如下：

<?xml version="1.0" encoding="utf-8"?>

<data>               
<li rel="http://www.abc.mp3"><strong>Song1</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcd.mp3"><strong>Song2</strong><a target="_blank" href=" ">Buy Song</a><em>Artist2</em></li>
<li rel="http://www.abcde.mp3"><strong>Song3</strong><a target="_blank" href=" ">Buy Song</a><em>Artist1</em></li>
<li rel="http://www.abcdef.mp3"><strong>Song4</strong><a target="_blank" href=" ">Buy Song</a><em>Artist2</em></li>

</data>

我不确定如何关联或调用XML文件，以便html可以像读取直接在html中一样读取它们。

您可以共享的任何代码帮助将不胜感激。

谢谢！

Answer 1

在不弄清楚所有代码的情况下，我将使用AJAX来请求XML文件。 然后，一旦收到该数据，就可以使用javascript / jQuery将HTML插入列表中。

Answer 2

请按照以下步骤获取解决方案

1. 创建一个Web服务/ Web Api，它将从服务器返回Songs XML。

2. 使用jQuery Ajax调用该Web服务

3. 读取响应并根据XML响应动态创建li HTML元素。