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

问题描述

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

提前谢谢。

解决方法

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