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 like）来源的字符串.XML文件的维护方式如下：

<?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

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

创建一个Web服务/ Web Api，它将从服务器返回Songs XML。
使用jQuery Ajax
根据XML响应动态读取响应并创建li HTML元素。

将XML内容提取到HTML中

2 个答案: