javascript - 如何使用 API 请求中的信息与网站交互？

Question

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

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

在https://api.hitbox.tv/media/status/masta (masta=channelname) 我收到了包含我的 Hitbox.tv channel 实时状态信息的回复。我相信响应类型称为 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 对象是什么样的。如果您可以发布该内容，我可以提供更多帮助。请记住在上面的脚本之前导入 JQuery。