如何在不重新加载页面 FLASK 的情况下更新 HTML 图像 [关闭]答案

【问题标题】：how to update HTML image without reloading the page FLASK [closed]如何在不重新加载页面 FLASK 的情况下更新 HTML 图像 [关闭]
【发布时间】：2020-08-21 19:42:16
【问题描述】：

如果他更改了图像而不在烧瓶 WTForms 中重新加载页面，我想更新用户图像

提前致谢。

【问题讨论】：

标签： html forms flask flask-wtforms wtforms

【解决方案1】：

如果你只是想改变页面的元素，这可以用javascript或jquery来完成。

如果您想在不重新加载的情况下提供新数据，那么像 ajax 之类的东西可能是最好的。

如果你有一个数据列表并且在主页 (/) 上，你可以在你的 html 中有这个：

<div id="place_for_data"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$("#search_form_input").keyup(function(){
    var text = $(this).val();

    $.ajax({
      url: "/data",
      type: "get",
      data: {jsdata: text},
      success: function(response) {
        $("#place_for_data").html(response);
      },
      error: function(xhr) {
        //Do Something to handle error
      }
    });
});
</script>

然后在您的data.html 文件中：

<label id="value_lable">
{% for d in data %}
    {{ d }}<br>
{% endfor %}
</label>

在你的烧瓶视图中有这样的东西：

@app.route('/')
def index():
    return render_template('index.html')


@app.route('/data')
def data():
    text = request.args.get('jsdata')

    data = ['data', 'to', 'be', 'returned']
    time.sleep(10)
    return render_template('data.html', data=data)

【讨论】：