Flask如何实现表单提交后在同页提交按钮旁显示成功提示

问题核心原因是POST请求处理完成后直接返回了独立的HTML字符串，没有将提示信息传回原表单页面渲染，才会跳转至独立页面显示内容。总共需要修改两处代码：

1. 调整后端Flask逻辑 #

删除原代码中提交成功后直接返回<h1>的逻辑，改为将成功提示作为参数传入模板，始终渲染原表单页面。修改后的完整后端代码如下：

from flask import Flask, render_template, request
from flask_mysqldb import MySQL

app = Flask(__name__)
app.config['DEBUG'] = True

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():
    success_msg = None
    if request.method == 'POST':
        digitado = request.form

        nome = digitado['nome']
        cpf = digitado['cpf']
        email = digitado['email']
        birth = digitado['birth']

        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()
        success_msg = "Dados cadastrados com sucesso"
    return render_template('index.html', success_msg=success_msg)

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

2. 调整前端模板代码 #

在表单的提交按钮相邻位置，加Jinja2模板判断逻辑：当存在成功提示参数时，直接在当前位置渲染提示文本。修改后的表单代码如下：

<form method="POST" action="">
    <div>
        <i class="fa-solid fa-pen"></i>
        <input type="text" required name="nome" autofocus placeholder="Nome" data-ls-module="charCounter" 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" data-ls-module="charCounter" 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>
    {% if success_msg %}
    <span style="color: #28a745; margin-left: 12px;">{{ success_msg }}</span>
    {% endif %}
</form>

可选优化：建表语句CREATE TABLE IF NOT EXISTS不需要放在视图函数里每次请求都执行，可以移到mysql = MySQL(app)代码之后，在应用启动时执行一次即可。

内容的提问来源于stack exchange，提问作者Bruhlickd