Flask中使用WTForms提交表单后结果页不显示问题求助

问题分析 #

你的代码存在几个关键问题导致提交后无反应：

• HTML表单结构错误，表单控件和提交按钮不在<form>标签内部，点击提交时没有实际发送表单数据
• 结果路由(/results)的参数接收方式错误，Flask路由函数不能直接将URL参数作为位置参数
• WTForms的验证逻辑和表单初始化存在小问题
• 结果页面没有正确接收并展示传递的数据

修正后的代码 #

1. flask_test.py

from flask import Flask, render_template, request, redirect, url_for
from wtforms import Form, TextAreaField
from wtforms.validators import DataRequired, Length

app = Flask(__name__)
# WTForms需要设置密钥用于CSRF保护（提前配置避免后续问题）
app.config['SECRET_KEY'] = 'your-custom-secret-key'

class Formdata(Form):
    inputvalue = TextAreaField('', validators=[DataRequired(), Length(min=2, max=120)])
 
@app.route("/", methods=['GET','POST'])
def index():
    form = Formdata(request.form)
    if request.method == 'POST' and form.validate():
        # 直接从验证后的form对象取值，更安全规范
        inputvalue = form.inputvalue.data
        return redirect(url_for('results', data=inputvalue))
    return render_template('index.html', title='Tweet', form=form)

@app.route("/results")
def results():
    # 通过request.args获取URL传递的参数
    data = request.args.get('data', '')
    return render_template('display.html', data=data)

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

2. index.html

<!DOCTYPE html>
<html>
<head>
    <title>Input Form</title>
</head>
<body>
    <h1>Enter Input</h1>
    {% from "formhelpers.html" import render_field %}
    <!-- 将表单控件和提交按钮全部包裹在form标签内 -->
    <form method="POST">
        <dl>
            {{ render_field(form.inputvalue) }}
        </dl>
        <div>
            <input type="submit" value="Submit" name="submit_btn">
        </div>
    </form>
</body>
</html>

3. display.html

<!DOCTYPE html>
<html>
<head>
    <title>Display Data</title>
</head>
<body>
    <h1>Displaying Data</h1>
    <p>{{ data }}</p>
    <a href="{{ url_for('index') }}">Go back to input</a>
</body>
</html>

关键修正点说明 #

• 表单结构修正：把<dl>和提交按钮全部放入<form>标签内部，确保点击提交时能正确发送表单数据；移除action="/results"，让表单默认提交到当前路由，由后端统一处理跳转逻辑
• 路由参数修正：results函数通过request.args.get('data')获取URL中传递的参数，符合Flask路由参数接收规范
• WTForms逻辑优化：合并请求方法判断和表单验证，直接从验证后的form对象取值，避免直接操作request.form
• 添加SECRET_KEY：为后续可能启用的CSRF保护提前配置，避免潜在的表单验证错误

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