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

Question

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

提前致谢。

Answer 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)

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

how to update HTML image without reloading the page FLASK

html

forms

flask

wtforms

flask-wtforms