如何在Flask单页面中保留多表单提交后的render_template结果

你现在遇到的问题是：提交第二个表单后，第一个表单的结果被清空了。这是因为当前两个路由各自只传递自己的表单数据，没有在请求之间保存第一个表单的内容。解决这个问题最直接的方式是用Flask的session来存储第一次提交的数据，这样在后续请求中就能随时取出并展示。

步骤1：修改Python后端代码 #

需要导入session模块，设置加密密钥（Flask的session依赖密钥来加密数据），并在两次提交时分别处理数据存储和传递：

from flask import Flask, render_template, request, session
app = Flask(__name__)
# 必须设置一个密钥，用于加密session数据，随便填一个字符串即可
app.secret_key = 'your_custom_secret_key'  # 替换成你自己的密钥

@app.route('/')
@app.route('/result', methods=['POST', 'GET'])
def result():
    if request.method == 'POST':
        # 把第一个表单的数据存入session
        session['first_form'] = request.form
        # 传递session里的第一个表单数据到模板
        return render_template("result.html", result=session['first_form'])
    # GET请求时，如果session里有数据也传递过去（比如刷新页面时）
    return render_template("result.html", result=session.get('first_form'))

@app.route('/func', methods=['POST', 'GET'])
def func():
    if request.method == 'POST':
        # 获取第二个表单的数据
        second_form = request.form
        # 同时传递第一个表单（从session取）和第二个表单的数据到模板
        return render_template("result.html", 
                               result=session.get('first_form'), 
                               func=second_form)
    # GET请求时同样传递已有数据
    return render_template("result.html", 
                           result=session.get('first_form'), 
                           func=session.get('second_form'))

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

步骤2：修正HTML模板的问题 #

原模板里的method = ["POST", "GET"]是错误写法，应该写成method="POST"，同时调整展示逻辑，确保两个结果都能正常显示：

<html>
   <body>
      <!-- 第一个姓名表单 -->
      <form action="/result" method="POST">
         <p>First Name<input type="text" name="FirstName" /></p>
         <p>Last Name<input type="text" name="LastName" /></p>
         <p><input type="submit" value="submit" /></p>
      </form>

      <!-- 展示第一个表单的结果 -->
      {% if result %}
      <p>姓名提交结果：{{ result.FirstName }} {{ result.LastName }}</p>
      {% endif %}

      <!-- 第二个附加信息表单，只有第一个表单提交后才显示 -->
      {% if result %}
      <form action="/func" method="POST">
          <p>附加信息1<input type="text" name="Info1" /></p>
          <p>附加信息2<input type="text" name="Info2" /></p>
          <p><input type="submit" value="submit" /></p>
      </form>
      {% endif %}

      <!-- 展示第二个表单的结果 -->
      {% if func %}
      <p>附加信息提交结果：{{ func.Info1 }} {{ func.Info2 }}</p>
      {% endif %}
   </body>
</html>

原理说明 #

• Flask的session是一种在不同HTTP请求之间保存用户数据的机制，数据会被加密后存在用户浏览器的Cookie中，只要设置了secret_key就可以安全使用。
• 第一次提交姓名表单时，我们把数据存入session['first_form']，后续不管是刷新页面还是提交第二个表单，都能从session中取出这个数据传递给模板，从而保证第一个结果不会消失。

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