我想使用来自 Mixcloud(音频托管服务,如 soundcloud)的 api 的数据,以便在新帖子发布到 Mixcloud 时创建一个新的子页面(它是否称为深层链接?)。
我的项目是一个播客网站。我正在想象 index.html 以列表中的每个播客剧集为特色,每个子页面都专用于一个剧集。小样
我对网络开发很陌生,所以请耐心等待。因此,我喜欢阅读参考资料/材料。
我已经想出了如何从 JSON api 获取数据并将其解析为 Javascript 字符串并更改 index.html 中元素的 innerHTML。
我很难理解每当有新帖子发布到 Mixcloud 时,您将如何生成新的子页面。
我也很难找到合适的材料来阅读这方面的内容,可能是因为我不知道要搜索的正确单词和术语。
到目前为止,这是我的代码片段。还有我正在使用的API/JSON 文件。
<div class="episode">
<div class="episode-title">Loading episode...</div>
</div>
<div class="episode">
<div class="episode-title">Loading episode...</div>
</div>
<div class="episode">
<div class="episode-title">Loading episode...</div>
</div>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//parse JSON to javascript objects
var response = JSON.parse(xhttp.responseText);
//array of the first 3 podcast episodes
var episodes = document.getElementsByClassName("episode");
//array of the first 3 podcast episode titles
var episodeTitles = document.getElementsByClassName("episode-title");
//loop to update innerHTML
for(var i = 0; i < episodes.length; i++) {
var episodeTitle = response.data[i].name;
episodeTitles[i].innerHTML = episodeTitle;
}
}
};
xhttp.open("GET", "https://api.mixcloud.com/radiomodem/cloudcasts/", true);
xhttp.send();
您似乎希望能够使用客户端代码创建页面的分层结构。我建议开始阅读client vs server。这个链接是第一个谷歌搜索结果。
如果您打算在 javascript 中作为客户端代码执行此操作,则您创建的页面实际上将不存在。您将创建一个单页应用程序,该应用程序引用看起来像页面但仅存储在内存中的资源。这些页面的交付将通过客户端路由器进行,而无需向服务器资源发出 Web 请求。使用单页应用程序方法,您将无法向多个用户展示 Mixcloud 帖子的相同缓存版本;您创建的内存页面仅存在于单个用户浏览器中。
您需要将代码拆分为单独的服务器和客户端代码库才能正常工作。
您的服务器将向https://api.mixcloud.com/radiomodem/cloudcasts/发出请求,并为每个子页面创建一个新的物理子页面文件。您的主页可以读取子页面目录的内容并将这些内容显示为可导航的选项。
在客户端,您拥有的只是 html。
如果您想坚持只学习一种语言,我建议将Node 与 Express 结合使用。这将允许您在服务器上运行 JavaScript。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句