时间戳

首页 > 解决方案 > 当 api (json) 发生变化时，你如何创建新的子页面？

javascript - 当 api (json) 发生变化时，你如何创建新的子页面？

问题描述

我想使用来自 Mixcloud（类似 soundcloud 的音频托管服务）的 api 数据，以便在将新帖子发布到 Mixcloud 时创建一个新的子页面（是否称为 deeplink？）。

我的项目是一个播客网站。我想象 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();

标签： javascriptjsonapideep-linkingmixcloud

解决方案

您似乎希望能够使用客户端代码创建页面的层次结构。我建议开始阅读client vs server。这个链接是第一个谷歌搜索结果。

如果您打算在 javascript 中作为客户端代码执行此操作，那么您创建的页面将实际上不存在。您将创建一个单页应用程序，该应用程序引用看起来像页面但仅存储在内存中的资源。这些页面的交付将通过客户端路由器进行，而无需向服务器资源发出 Web 请求。使用单页应用程序方法，您将无法向多个用户呈现 Mixcloud 帖子的相同缓存版本；您创建的内存页面仅存在于单个用户浏览器中。

您需要将代码拆分为单独的服务器和客户端代码库才能正常工作。

您的服务器将向https://api.mixcloud.com/radimodem/cloudcasts/发出请求，并为每个子页面创建一个新的物理子页面文件。您的主页可以读取子页面目录的内容并将这些内容呈现为可导航的选项。

在客户端，您所拥有的只是 html。

如果您只想坚持学习 1 种语言，我建议您将Node 与 Express 结合使用。这将允许您在服务器上运行 JavaScript。

推荐阅读