如何使用来自 API 请求的信息与网站交互？

Question

我很熟悉 html 和 css 但绝对不熟悉 Javascript 我可能需要 Javascript 来实现我想要的:

每个星期五我都会在 Hitbox.tv 进行直播。我已经在我的网站上嵌入了视频播放器。我想在离线时在视频播放器前显示存储在我的服务器上的图像。我总是手动编辑 html 页面来显示或隐藏图像，但如果它能自动工作就更好了。

在 https://api.hitbox.tv/media/status/masta (masta=channelname) 我在 Hitbox.tv 收到了关于我频道实时状态信息的回复。我相信响应类型称为 JSON，但我如何使用 "media_is_live" 的值来显示或隐藏我服务器上的图像？

我在各种论坛上搜索了很长时间，但没有找到适合我的答案。任何帮助表示赞赏！

Answer 1

你可以使用的好东西是 AJAX。 AJAX 是一项 Web 技术，可在您的页面加载后向资源发出请求。为了做这种事情，我使用了 JQuery AJAX 函数。

在脚本标签中，您可以这样做：

<script>
  $(document).ready(function() {
    $.ajax({
      dataType: "jsonp",
      url: "https://api.hitbox.tv/media/status/masta",
      success: function(data){
        var img = $('myImageId');
        if(data.media_is_live){
          img.style.visibility = 'visible';
        } else {
          img.style.visibility = 'hidden';
        }
      }); 
    });
</script>

$(document).ready(function() { 部分表示一旦页面加载完成，其中的代码就会执行。

可以通过更多信息改进此答案。当然，我在猜测您得到的 json 对象是什么样的。如果你能 post 那，我可以提供更多帮助。记得在上面的脚本之前导入 JQuery 。

如何使用来自 API 请求的信息与网站交互？

How to use information from an API request to interact with a website?

javascript

api

url

response

request