当 api (json) 更改时,您如何创建新的子页面?

壁虎

我想使用来自 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();
蓝水86

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

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

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

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

创建REST / JSON API

来自分类Dev

创建 JSON API 请求

来自分类Dev

如何从API解析JSON

来自分类Dev

如何请求JSON API

来自分类Dev

为 KairosDB api 创建 Json

来自分类Dev

如何从JSON API省略工件

来自分类Dev

如何编辑JSON API响应

来自分类Dev

如何从 Rest API 访问 json

来自分类Dev

您如何在JSON API中表示无穷大?

来自分类Dev

您现在如何在函数中更新json?(API,角度)

来自分类Dev

React Router:从 Api 为 Json 数据创建单个页面

来自分类Dev

如何在 JavaScript 中为来自 JSON API 的每个响应创建一个新的 div?

来自分类Dev

JSON - Blogger API - 如何从特定页面读取文本?

来自分类Dev

每当我的json数据文件更改时如何刷新页面

来自分类Dev

创建API类以处理JSON Data Swift

来自分类Dev

使用JSON新闻API创建搜索查询

来自分类Dev

使用Rails API和JSON创建用户?

来自分类Dev

WordPress上的JSON API-创建帖子

来自分类Dev

使用JSON在python中创建Rest Api?

来自分类Dev

创建 json api laravel 所属关系

来自分类Dev

为 JSON 创建 kafka 流 API

来自分类Dev

为什么通过“工厂”创建的JSON与从“ API”获得的JSON不同?

来自分类Dev

如何更改每页Wordpress JSON Api加载的帖子数

来自分类Dev

Flutter 如何根据 JSON API 的状态更改颜色

来自分类Dev

在 dotnet 核心 Web API 中使用现有的 JSON 动态创建新的 JSON 模型

来自分类Dev

如何为JSON API创建复杂的JavaScript对象

来自分类Dev

如何为AngularJS的数据库创建JSON API?

来自分类Dev

如何查看由NEST API创建的REST JSON?

来自分类Dev

如何为AngularJS的数据库创建JSON API?