Flask项目中HTML输入框数据传递及回显问题求助

问题分析 #

你的代码存在三个核心问题导致数据无法传递和回显：

• HTML表单中url_for的端点未用字符串包裹，Jinja2无法正确解析路由
• Flask后端错误使用request.args获取POST表单数据（request.args仅用于URL查询参数）
• 缺少将后端数据传递给模板并在页面回显的逻辑

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main_login_design.css">
    <title>Projekt Tsarli</title>
    <nav class="header">
        <div class="header">
            <p class="logo">Projekt Tsarli</p>
        </div>
    </nav>
    <br><br><br><br><br><br>
</head>
<body>
    <div class="ai_chatbox">
        <div>
            <!-- 修正url_for的端点字符串包裹问题 -->
            <form action="{{ url_for('main_login') }}" method="post">
                <input name="ai_chatbox" placeholder="Enter your thoughts here" class="chatbox_design">
                <button type="submit">Enter</button>
                <br><br>
            </form>
            <!-- 添加回显区域 -->
            {% if thoughts %}
                <div class="echo-area">
                    <strong>你输入的内容：</strong>{{ thoughts }}
                </div>
            {% endif %}
        </div>        
    </div>
</body>
</html>

修正后的Flask代码 #

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=["GET","POST"])
def main_login():
    thoughts = ""
    if request.method == "POST":
        # 改用request.form获取POST表单数据
        thoughts = request.form.get("ai_chatbox", "")
    # 将数据传递给模板用于回显
    return render_template('main_login.html', thoughts=thoughts)

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

关键说明 #

1. 表单路由修正：url_for('main_login')中main_login必须用单引号包裹，Jinja2才能识别为路由端点字符串
2. POST数据获取：POST请求的表单参数通过request.form.get(key, 默认值)获取，request.args仅适用于GET请求的URL参数（如?key=value）
3. 回显逻辑：后端将获取到的用户输入通过render_template的第二个参数传递给模板，模板中用Jinja2的{% if %}判断是否有数据，然后渲染显示

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