服务器端（python）和客户端（javascript）设计和交互答案

【问题标题】：Server-side(python) and client-side(javascript) design and interaction服务器端（python）和客户端（javascript）设计和交互
【发布时间】：2013-10-27 00:18:53
【问题描述】：

我正在使用 Python 在 Flask 和 javascript 上构建一个 Web 应用程序。使用了 YouTube 数据 API (python) 和 YouTube 播放器 API(javascript)。

虽然我已经开发了一些 Web 应用程序，但决定某些逻辑是应该从服务器还是客户端工作对我来说仍然很模糊。当我从这个例子中学习时，我会对这件事有更深刻的理解。

我在 Python 中使用来自服务器的 Youtube Data API 来检索与用户搜索查询最相关的视频。

my_app.py（在 Flask 上）

@app.route('/')
def main():
  """finds the most relevant video's id using YouTube Data API"""
  search_param = request.args.get('video_search')
  video_id = search_video(search_param)
  return render_template("index.html", video_id=video_id)

index.html

<iframe width="560" height="315" src="//www.youtube.com/embed/{{ video_id }}?autoplay=1" frameborder="0" allowfullscreen></iframe>

上面的效果很好。但是，我想要更多地控制 YouTube 播放器。我决定在 javascript 中使用 YouTube Player API，而不是像提供的那样手动嵌入视频。

带有 javascript 的 index.html

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('iframe-player', { //inserts into 'iframe-player'
        width: '640',
        height: '390',
        //videoId: 'M7lc1UVf-VE', <<<<< PAY ATTENTION TO THIS PART
        events: {
            'onReady': onPlayerReady, //onPlayaerReady will fire when onReady executes
            'onStateChange': onPlayerStateChange //onPlayerStateChange will fire when onStateChange executes
        }
    });
}

这是相关的 javascript 代码。我需要传递一个 video_id 才能在 javascript 中使用 YouTube Player API。要使当前逻辑正常工作，流程应如下所示：

用户搜索视频
服务器：找到视频并返回video_id
客户端：使用服务器返回的video_id，加载播放器并播放视频。

第一个问题： 然而，这不是不可能吗？在服务器返回任何内容之前加载 Javascript 函数。将值从服务器方法传递给 javascript 函数是不可能的。我说的对吗？

第二个问题： 在这种情况下，最好不要使用 Python，而只使用 javascript 从客户端执行所有操作？

第三个问题： 这会返回错误吗？

<div id="my_video_id">{{video_id}}</div>
<script>
  var video_id = $("#my_video_id")
</script>

谢谢。我尽力解释问题。我将不胜感激。

【问题讨论】：

标签： javascript python web-applications flask

【解决方案1】：

您将视频 ID 传递给 index.html 模板，因此只需在您的 Javascript 中使用它即可。

例如，在index.html 模板和包含您的 Javascript 的脚本标签内，使用 {{ video_id }} 添加视频 ID：

<script>
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('iframe-player', {
        width: '640',
        height: '390',
        videoId: '{{ video_id }}',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}
</script>

如果这不是您想要的，您可以使用 Ajax 获取视频 ID，而无需重新加载页面。

【讨论】：