如何在不重新加载Flask中的页面的情况下显示闪烁的消息? [英] How to display flashing message without reloading the page in Flask?

问题描述

我正在使用Python中的Flask开发Web应用程序.

I'm working on a web application using Flask in Python.

我的应用程序中有个小功能，它可以在后台计算一些值，并通过闪烁的消息在网页上显示结果.

I have small function in my application that calculates some values in the background and displays the result on the web page via a flashing message.

一切正常，但一切正常，但需要重新加载页面才能获得闪烁的消息.

Everything is displaying and working fine but it requires page reloading to get the flashing message.

我想显示消息而不重新加载页面.

I want to display messages without reloading page.

我听说我可以使用js来做到这一点，但是我对js并不熟悉.

I heard that I can do that with js, but I'm not familiar with js.

如果您有任何想法或建议，我将不胜感激.

If you have any ideas or suggestion I would appreciate.

有一些我的代码可以更好地了解我在做什么.

There is my code that could build a better picture of what I'm doing.

这是我的应用程序和主要html文件之间的渲染器

This is the renderer between my app and the main html file

{% macro render_field(field) %}
 <dt> {{ field.label }}
 <dd> {{ field(**kwargs)|safe }}
 {% if field.errors %}
        <ul class=errors>
        {% for error in field.errors %}
                <li>{{ error }}</li>
        {% endfor %}
        </ul>
 {% endif %}
 </dd>
{% endmacro %}

这是我要显示闪烁消息的html文件:

This is the html file were I want to display flashing messages:

<div class="container-fluid" style="min-height:100%">
  {% with messages = get_flashed_messages() %} 
    {% if messages %} 
      {% for message in messages %}
      <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button> 
        {{message}}
      </div>
      {% endfor %} 
    {% endif %} 
  {% endwith %}
</div>

推荐答案

有时，在请求完成后为用户提供状态更新很有用.这 可能是确认消息，警告或错误.一个典型的例子是 向网站提交错误的登录表单，服务器通过渲染进行响应 再次在登录表单上显示一条消息，通知您您的用户名或 密码无效. Flask将此功能作为核心功能包括在内.例4-6显示了flash() 函数可以用于此目的.

Sometimes it is useful to give the user a status update after a request is completed. This could be a confirmation message, a warning, or an error. A typical example is when you submit a login form to a website with a mistake and the server responds by rendering the login form again with a message above it that informs you that your username or password is invalid. Flask includes this functionality as a core feature. Example 4-6 shows how the flash() function can be used for this purpose.

示例4-6. hello.py:闪烁的消息

@app.route('/', methods=['GET', 'POST'])
def index():
    form = Nameform()
    if form.validate_on_submit():
        old_name = session.get('name')
        if old_name is not None and old_name != form.name.data:
            flash('Looks like you have changed your name!')
        session['name'] = form.name.data
        form.name.data = ''
        return redirect(url_for('index'))
    return render_template('index.html', form=form, name=session.get('name'))
        form = form, name = session.get('name'))

在此示例中，每次提交名称时，都会将其与存储的名称进行比较 在用户会话中，而该用户会话本来可以在之前提交 相同的形式.如果两个名称不同，则使用调用flash()函数. 消息显示在发送回客户端的下一个响应上.

In this example, each time a name is submitted it is compared against the name stored in the user session, which would have been put there during a previous submission of the same form. If the two names are different, the flash() function is invoked with a message to be displayed on the next response sent back to the client.

呼叫flash()不足以显示消息.所使用的模板 应用程序需要呈现这些消息.呈现闪烁消息的最佳位置是 基本模板，因为这将在所有页面中启用这些消息.烧瓶使 get_flashed_messages()函数可用于模板以检索消息并 渲染它们，如示例4-7所示.

Calling flash() is not enough to get messages displayed; the templates used by the application need to render these messages. The best place to render flashed messages is the base template, because that will enable these messages in all pages. Flask makes a get_flashed_messages() function available to templates to retrieve the messages and render them, as shown in Example 4-7.

示例4-7. template/base.html:Flash消息呈现

{% block content %}
<div class="container">
    {% for message in get_flashed_messages() %}
    <div class="alert alert-warning">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        {{ message }}
    </div>
    {% endfor %}

    {% block page_content %}{% endblock %}
</div>
{% endblock %}

在此示例中，消息是使用Bootstrap的警告CSS样式呈现的，用于警告 消息(图4-4中显示了一个).

In this example, messages are rendered using Bootstrap’s alert CSS styles for warning messages (one is shown in Figure 4-4).

图4-4.闪烁的消息

之所以使用循环，是因为可能有多条消息排队等待显示，一条消息用于 每次在上一个请求周期中调用flash()时.从get_flashed_messages()检索到的消息将在下次调用此函数时不返回， 因此，闪烁的消息仅出现一次，然后被丢弃.

A loop is used because there could be multiple messages queued for display, one for each time flash() was called in the previous request cycle. Messages that are retrieved from get_flashed_messages() will not be returned the next time this function is called, so flashed messages appear only once and are then discarded.

这篇关于如何在不重新加载Flask中的页面的情况下显示闪烁的消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！