【问题标题】：Dynamically update image using Python Flask AJAX使用 Python Flask AJAX 动态更新图像
【发布时间】：2014-09-27 01:12:40
【问题描述】：

我现在正在构建 1 个非常简单的 Web 应用程序，但对烧瓶和 jinja（以及整个 Web 开发实际上）非常陌生。

我有一个监视文件夹，它将永远通过 ftp 以脉冲方式将图像发送给它。此 wtch 文件夹中只会有一张图片。每 1 分钟，旧图片会被新图片替换，并带有新的时间戳。

我也想动态更新页面（并显示时间戳），而不必重新加载我稍后将添加的任何横幅或静态图像。我只想更新“Channels.Jinja”示例中的以下两行。

    <br>{{screenshot_datetime}}<br/>
    <img src={{screenshot_location}} width="100%"/>

Channels.Jinja

<!DOCTYPE HTML>
<html>
<head>
<title>Training</title>
</head>

<body bgcolor=white>
 <div id=main>
 <br>Date and Time of Screenshot <br/>
 <br>{{screenshot_datetime}}<br/>
 <img src={{screenshot_location}} width="100%"/>
 </div>

 <div id='test'>
<p>
<script>
var myVar=setInterval(function(){get_image()},1000);

function get_image() {
    $.ajax({
    type: 'GET',
    cache: false,
    url: 'get_data',
    success: function({{data}}) {
    $('img').attr('src', data);  
    }
    });
}
</script>
</p>
</div>
</body>
</html>

Channels.py

 def render_channel_route(cr):
 static_folder = os.path.join('static',cr)
file_list = os.listdir(static_folder)

channel_files = [f for f in file_list if f.startswith(cr)]

if not channel_files :
    logger.error('Could not find image file for Channel. File should start with {0}'.format(cr))
    abort(404)
img = os.path.join(static_folder,file_list[0])

ts = get_time_from_filename(file_list[0],cr)

return render_template('Channels.jinja',screenshot_datetime=time.strftime('%c',ts),screenshot_location=img)



@app.route('/channel01-10')
def first_tab():
return render_channel_route('channel01-10')


@app.route('/get_data', methods=['GET'])
def get_data():
   return render_template('Channels.jinja',
 screenshot_datetime=time.strftime('%c',ts),screenshot_location=img)

我很茫然，我已经笨拙了一段时间了。欢迎任何和所有的建议！我在刷新时看到 304 响应，但即使是我尝试设置的计时器也没有工作。请原谅草率的代码，高度易变的代码经常被更改-_-

【问题讨论】：

标签： python ajax get flask jinja2

【解决方案1】：

我不知道有一种“特殊”的方式来使用一些 Flask 扩展来处理 Ajax，但是在“正常”的 Ajax 流程中，您首先需要使用 url_for 将正确的 url 放入您的 Ajax 调用并返回以某种方式格式化的数据（在我的 JSON 示例中）而不是再次呈现模板：

$.ajax({
    type: 'GET',
    cache: false,
    url: "{{ url_for('get_data') }}", 
    success: function(resp){
        $('img').attr('src', resp.url);
        $('#sst').html(resp.time);
    }
});

因此，在控制器的 get_data 函数中，您必须再次获取图像的时间和路径，然后返回类似这样的内容（以适合我之前的示例）：

from flask import json
@app.route('/get_data', methods=['GET'])
def get_data():
    #get time and path
    time=... 
    path=... 
    return json.dumps({time:time,url:path}), 200, {'Content-Type':'application/json'}

看我使用 $('#sst') 所以你必须把你的 HTML：

<br><span id='sst'>{{screenshot_datetime}}</span><br/>

【讨论】：

我现在仍在努力让它工作。我将有 8 个左右的通道，因此每个 /get_data 调用都需要一个指向通道的引用，也就是“cr”变量。在渲染通道路由中。我不确定如何提供 img 位置（应该类似于 \static\channel01-10\channel01-10_timestamp.png，因为我需要解析文件名以获取时间戳和文件名（因为这是我不知道的监视文件夹控件命名）。我尝试添加你建议的代码，但我没有进展。需要脉冲请求我需要明天进一步调查，所以谢谢你的输入！
要将频道号（例如）发送到 get_data 函数，您可以将其作为查询字符串传递。如果您知道 jinja2 渲染时的通道号，您可以使用{{ url_for('get_data', channel=03) }} ，如果您以更动态的方式获取通道号，您可以使用'{{ url_for('get_data') }}' + '?channel=' + your_channel_var_set_somewere。当然，在您的控制器中要获取查询，您必须使用 Flask 请求对象：ct_number = request.args.get('channel', None)。