Flask 应用中表单提交成功后如何同页显示提示信息-html教程-PHP中文网

Flask 应用中表单提交成功后如何同页显示提示信息

本文详细介绍了在 Flask 应用中，如何实现在表单提交后，不跳转页面而是在当前页面显示成功或失败提示信息。通过利用 Flask 内置的 flash 消息机制，结合 Jinja2 模板的 get_flashed_messages 函数，开发者可以优雅地将动态消息渲染到表单旁边，显著提升用户体验，避免不必要的页面重定向。

理解问题与传统方案的局限

在构建 web 应用时，表单提交后的用户反馈至关重要。传统的 flask 做法，例如在处理完 post 请求后直接返回一个 html 字符串，如 return '<h1>dados cadastrados com sucesso</h1>'，会导致浏览器跳转到一个新页面，只显示该字符串内容。这种方式虽然能传达信息，但破坏了用户体验，尤其是在用户期望停留在当前页面以进行更多操作时。理想情况下，用户提交表单后，应在当前页面表单附近收到即时反馈（如“注册成功”或“输入有误”），而无需离开当前视图。

Flask Flash 消息机制

Flask 提供了一个名为 flash() 的内置函数，专门用于在不同请求之间传递一次性消息。这些消息通常用于向用户显示状态更新、错误或成功提示。flash() 函数将消息存储在会话中，并在下一次请求渲染模板时，可以通过 get_flashed_messages() 函数检索并显示这些消息。一旦消息被检索，它们就会从会话中移除，确保消息只显示一次。

flash() 函数可以接受两个参数：

message：要显示的消息内容（字符串）。
category (可选)：消息的类别，如 'success'、'error'、'info' 或 'warning'。这对于在前端通过 CSS 为不同类型的消息应用不同样式非常有用。

后端 Flask 应用修改

为了在同一页面显示消息，我们需要对 Flask 应用的后端逻辑进行调整。关键在于：在处理完表单数据后，不再直接返回 HTML 字符串或重定向到其他页面，而是使用 flash() 存储消息，然后重新渲染包含表单的当前模板。

以下是基于原始代码修改后的 Flask 路由函数示例：

from flask import Flask, render_template, request, flash # 导入 flash
from flask_mysqldb import MySQL

app = Flask(__name__)
app.config['DEBUG'] = True
app.config['SECRET_KEY'] = 'your_secret_key_here' # flash 消息需要 SECRET_KEY

app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = '104041122'
app.config['MYSQL_DB'] = 'PAGINA10'

mysql = MySQL(app)

@app.route('/', methods=['GET', 'POST'])
def form():
    if request.method == 'POST':
        digitado = request.form
        nome = digitado['nome']
        cpf = digitado['cpf']
        email = digitado['email']
        birth = digitado['birth']

        try:
            cursor = mysql.connection.cursor()
            # 确保表存在，如果不存在则创建
            cursor.execute("CREATE TABLE IF NOT EXISTS pagina10 (nome VARCHAR(50) NOT NULL, cpf VARCHAR(11) NOT NULL, email VARCHAR(20) NOT NULL, birth DATE NOT NULL)")
            cursor.execute("INSERT INTO pagina10 (nome, cpf, email, birth) VALUES (%s, %s, %s, %s)", (nome, cpf, email, birth))
            mysql.connection.commit()
            cursor.close()
            flash('Dados cadastrados com sucesso!', 'success') # 注册成功，使用 'success' 类别
        except Exception as e:
            # 捕获异常并回滚事务，同时闪存错误消息
            mysql.connection.rollback()
            flash(f'Erro ao cadastrar dados: {e}', 'error') # 注册失败，使用 'error' 类别

        # 无论成功或失败，都重新渲染 index.html 模板
        return render_template('index.html')

    # GET 请求时直接渲染表单页面
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

登录后复制

注意事项：

SECRET_KEY: flash 消息依赖于 Flask 的会话机制，而会话需要一个 SECRET_KEY 来加密。请务必在实际应用中设置一个强密码。
错误处理: 示例中增加了 try...except 块来捕获数据库操作可能出现的错误，并在发生错误时回滚事务并闪存错误消息，这对于生产环境应用至关重要。
重新渲染模板: 最关键的一点是，在 if request.method == 'POST' 块的末尾，我们使用 return render_template('index.html') 来重新加载包含表单的页面，而不是重定向或返回纯文本。

前端 Jinja2 模板集成

在 HTML 模板中，我们需要使用 Jinja2 语法来检查并显示任何闪存的消息。get_flashed_messages() 函数可以从会话中检索所有已闪存的消息。如果 with_categories=true，它会返回一个包含消息类别和消息内容的元组列表。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

以下是 index.html 模板中集成消息显示的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro Form</title>
    <!-- 引入 Font Awesome 或其他 CSS 库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 简单的 CSS 样式用于消息显示 */
        .message-container {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
            display: none; /* 默认隐藏，有消息时显示 */
        }
        .message-container.show {
            display: block;
        }
        .alert_success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .alert_error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        /* 其他表单样式 */
        form {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        form div {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        form div i {
            margin-right: 10px;
            color: #555;
        }
        form input[type="text"],
        form input[type="email"],
        form input[type="date"] {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        form button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        form button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <form method="POST" action="">
        <div>
            <i class="fa-solid fa-pen"></i>
            <input type="text" required name="nome" autofocus placeholder="Nome" maxlength="50" minlength="3"/>
        </div>
        <div>
            <i class="fa-solid fa-id-card"></i>                    
            <input type="text" required name="cpf" autofocus placeholder="CPF" minlength="11" maxlength="11"/>               
        </div>
        <div>
            <i class="fa-solid fa-at"></i>                    
            <input type="email" required name="email" autofocus placeholder="E-mail" minlength="5"  pattern="[UTF-8]">                
        </div>
        <div>
            <i class="fa-solid fa-cake-candles"></i> 
            <input type="date" required name="birth" autofocus placeholder="Nascimento">                
        </div>
        <button type="submit">Cadastrar</button>

        <!-- Flash 消息显示区域 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="message-container show">
                {% for category, message in messages %}
                    <div class="alert_{{ category }}">
                        {{ message }}
                    </div>
                {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
    </form>

    <script>
        // 可选：添加 JavaScript 自动隐藏消息
        document.addEventListener('DOMContentLoaded', function() {
            const messageContainer = document.querySelector('.message-container');
            if (messageContainer && messageContainer.classList.contains('show')) {
                setTimeout(() => {
                    messageContainer.classList.remove('show');
                    // 或者直接移除元素
                    // messageContainer.remove(); 
                }, 5000); // 5秒后自动隐藏
            }
        });
    </script>
</body>
</html>

登录后复制

在上述 HTML 代码中：

{% with messages = get_flashed_messages(with_categories=true) %}：这是一个 Jinja2 块，用于获取所有闪存的消息。with_categories=true 确保我们能同时获取消息内容和其类别。
{% if messages %}：检查是否存在任何闪存的消息。
{% for category, message in messages %}：遍历每条消息，category 和 message 分别代表消息的类别和内容。
<div class="alert_{{ category }}">：利用消息类别动态生成 CSS 类名（例如 alert_success 或 alert_error），以便通过 CSS 应用不同的样式。
{{ message }}：显示消息内容。
消息放置: 建议将此消息显示区域放置在表单内部，例如按钮下方或表单顶部，这样用户就能在提交后立即看到反馈。

样式与用户体验提升

通过为不同的消息类别（如 success 和 error）定义不同的 CSS 样式，可以显著提升用户体验。例如，成功消息可以显示为绿色背景，而错误消息则显示为红色背景。

/* 示例 CSS */
.message-container {
    margin-top: 15px;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.message-container.hide {
    opacity: 0;
}
.alert_success {
    background-color: #d4edda; /* 浅绿色 */
    color: #155724; /* 深绿色文本 */
    border: 1px solid #c3e6cb;
}
.alert_error {
    background-color: #f8d7da; /* 浅红色 */
    color: #721c24; /* 深红色文本 */
    border: 1px solid #f5c6cb;
}

登录后复制

结合 JavaScript，可以实现消息在一段时间后自动消失的效果，进一步优化用户界面。

注意事项

SECRET_KEY 的重要性：如前所述，flash 消息依赖于 Flask 的会话，会话需要一个安全的 SECRET_KEY。在生产环境中，请确保使用一个足够复杂且保密的密钥。
消息的一次性：flash 消息被设计为“一次性”的。一旦通过 get_flashed_messages() 检索，它们就会从会话中清除。这意味着如果用户刷新页面，消息将不再显示（除非后端再次 flash）。
模板包含：如果你的应用有多个页面都需要显示闪存消息，建议将闪存消息的 Jinja2 代码片段提取到一个单独的模板文件（例如 _messages.html），然后在其他模板中通过 {% include '_messages.html' %} 引入。
错误处理：在实际应用中，对数据库操作或其他可能失败的逻辑进行健壮的错误处理至关重要。使用 try...except 块来捕获异常，并相应地闪存错误消息。

总结

通过利用 Flask 的 flash 消息机制和 Jinja2 模板的 get_flashed_messages() 函数，开发者可以优雅地在表单提交后，无需页面跳转即可在当前页面显示动态的用户反馈。这种方法不仅提升了用户体验，使应用更加现代化和交互性强，也符合 Web 开发的最佳实践。通过合理的消息分类和前端样式，可以为用户提供清晰、直观的操作反馈。

以上就是Flask 应用中表单提交成功后如何同页显示提示信息的详细内容，更多请关注php中文网其它相关文章！