时间戳

首页 > 解决方案 > 如何在不重新加载页面 FLASK 的情况下更新 HTML 图像

html - 如何在不重新加载页面 FLASK 的情况下更新 HTML 图像

问题描述

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

提前致谢。

标签： htmlformsflaskflask-wtformswtforms

解决方案

如果您只想更改页面的元素，可以使用 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)

推荐阅读