如何在不重新加载 Flask 页面的情况下显示闪烁的消息？

Question

我正在使用 Python 中的 Flask 开发一个 Web 应用程序。

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

一切都显示和工作正常，但需要重新加载页面才能获得闪烁的消息。

我想在不重新加载页面的情况下显示消息。

我听说我可以用 js 做到这一点，但我对 js 不熟悉。

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

我的代码可以更好地了解我正在做的事情。

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

 {% 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 文件：

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

Answer 1

以下是Flask Web 开发：使用 Python 开发 Web 应用程序（第 46-48 页）对消息闪烁的评论：

有时在请求完成后向用户提供状态更新很有用。 这可能是确认消息、警告或错误。 一个典型的例子是，当您向网站提交登录表单时出错，服务器通过再次呈现登录表单并在其上方显示一条消息作为响应，通知您您的用户名或密码无效。 Flask 将此功能作为核心功能包含在内。 例 4-6 显示了如何为此使用flash()函数。

例 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()函数并在下一个发送回客户端的响应中显示一条消息。

调用flash()不足以显示消息； 应用程序使用的模板需要呈现这些消息。 呈现闪现消息的最佳位置是基本模板，因为这将在所有页面中启用这些消息。 Flask 为模板提供了一个get_flashed_messages()函数来检索消息并呈现它们，如例 4-7 所示。

例 4-7。 模板/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 所示）。

图 4-4。 闪现的消息

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

Answer 2

在不重新加载页面的情况下，这是不可能通过 Python 实现的。 您必须在 javascript 中执行此操作。 我建议使用display: none和display: block CSS 样式。 这是一个例子。

1) Python 代码，这应该放在你的app.py或flask.py文件中。

app.route('/flash/<message>')
def flash(message):
  return render_template('flash.html', msg=message)

这将呈现名为flash.html的 HTML 页面。 传入的 URL 还会有另一个参数， <message>这是会闪烁的消息。 像这样的 URL， localhost:80/flash/Hello%20World! 将闪烁消息“Hello World！” 在你的屏幕上。

还有另一种传递消息的方法，这是将参数。 代码是这样的。

app.route('/flash')
def flash():
  message = request.args.get("msg")
  return render_template("flash.html", ,msg=message)

这使用烧瓶的请求参数。 所以像这样的 URL， localhost:80/flash?msg=Hello%20World! 将给出一条闪烁的消息，说“Hello World！”。 如果要使用此方法，请确保在导入语句中包含 import 语句， from flask import request 。

2) Html 代码，这是模板文件夹中名为flash.html的单独文件。

<body>
  <h1 id="header">{{ message }}</h1>
  <script>
    var heading = $("#header");
    setInterval(function() {
      if (heading.style.display == "block") { heading.style.display = "none"; }
      else if (heading.style.display == "none") { heading.style.display = "block"; }
    }, 1000);
  </script>
</body>

setInterval 中的1000是毫秒。 所以标题会每 2 秒闪烁一次。

Answer 3

您可能需要考虑改用Toastr 。 我遇到了与 Flask 的 Flash 功能相同的障碍，而 Toastr 是纯 JS。 您可以像代码中的控制台日志行一样使用它

toastr.info("Here's a message to briefly show to your user");

如何在不重新加载 Flask 页面的情况下显示闪烁的消息？

问题描述

3 个解决方案

解决方案1
11 2016-12-03 19:42:28

解决方案2
5 2016-12-03 17:44:15

解决方案3
1 2017-12-13 05:11:27

如何在不重新加载 Flask 页面的情况下显示闪烁的消息？

问题描述

3 个解决方案

解决方案1 11 2016-12-03 19:42:28

解决方案2 5 2016-12-03 17:44:15

解决方案3 1 2017-12-13 05:11:27

解决方案1
11 2016-12-03 19:42:28

解决方案2
5 2016-12-03 17:44:15

解决方案3
1 2017-12-13 05:11:27