在Flask开发的Web应用中，处理HTML表单提交后向用户展示操作结果反馈是提升用户体验的重要环节。无论是用户注册、数据提交还是信息修改，都需要明确告知用户操作是否成功，让用户清楚当前操作的状态。
核心实现思路
表单提交后显示消息的核心逻辑分为三个部分：后端接收表单数据并处理、后端将处理结果消息传递给前端、前端在页面中渲染消息内容。Flask中可以通过flash函数存储临时消息，再结合get_flashed_messages函数在前端获取消息，实现消息的传递和展示。
后端实现步骤
1. 初始化Flask应用并配置密钥
使用flash函数需要先为Flask应用配置SECRET_KEY，用于加密会话数据，保证消息存储的安全性。
from flask import Flask, render_template, request, flash
app = Flask(__name__)
# 配置密钥，实际开发中建议使用更复杂的随机字符串
app.config['SECRET_KEY'] = 'your_secret_key_here'
if __name__ == '__main__':
app.run(debug=True)
2. 编写表单页面路由
创建返回表单页面的路由，用户访问该路由时可以查看到提交表单的页面。
@app.route('/form')
def form_page():
# 渲染表单页面模板
return render_template('form.html')
3. 编写表单提交处理路由
创建处理表单提交的路由，接收表单数据后判断操作结果，使用flash函数存储对应的成功或失败消息，再重定向到表单页面展示消息。
@app.route('/submit', methods=['POST'])
def submit_form():
# 获取表单提交的用户名数据
username = request.form.get('username')
# 简单校验逻辑，用户名为空则提交失败
if not username:
flash('表单提交失败，用户名不能为空')
else:
# 这里可以添加实际的数据处理逻辑，比如存储到数据库
flash('表单提交成功，欢迎您' + username)
# 重定向到表单页面，避免表单重复提交
return render_template('form.html')
前端HTML表单实现
创建form.html模板文件，包含表单结构和消息展示区域。消息展示区域通过get_flashed_messages函数获取后端传递的消息并渲染。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单提交示例</title>
<style>
.success { color: green; margin: 10px 0; }
.error { color: red; margin: 10px 0; }
</style>
</head>
<body>
<h2>用户信息提交表单</h2>
<!-- 消息展示区域 -->
{% with messages = get_flashed_messages(with_categories=false) %}
{% if messages %}
{% for message in messages %}
<p class="{% if '失败' in message %}error{% else %}success{% endif %}">
{{ message }}
</p>
{% endfor %}
{% endif %}
{% endwith %}
<!-- 表单区域 -->
<form method="POST" action="/submit">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<button type="submit">提交</button>
</form>
</body>
</html>
关键注意点
- 必须使用重定向或者重新渲染模板的方式展示消息，避免用户刷新页面导致表单重复提交。
SECRET_KEY是flash功能正常运行的必要条件，生产环境中不要使用简单的测试密钥。- 如果需要对消息进行分类，比如区分成功和失败消息，可以给
flash函数传递分类参数，前端根据分类渲染不同的样式。
带分类的消息实现示例
如果需要更精细的消息分类，可以调整后端flash调用和前端获取消息的逻辑：
# 后端传递带分类的消息，第一个参数是消息内容，第二个参数是分类标识
flash('表单提交失败，用户名不能为空', 'error')
flash('表单提交成功，欢迎您' + username, 'success')
<!-- 前端获取带分类的消息 -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<p class="{{ category }}">{{ message }}</p>
{% endfor %}
{% endif %}
{% endwith %}
通过以上步骤，就可以完整实现Flask处理HTML表单提交后显示成功或失败消息的功能，满足大部分Web应用的表单反馈需求。