Flask 中同一页面多个表单提交的正确处理方式-html教程-PHP中文网

Flask 中同一页面多个表单提交的正确处理方式

当 HTML 页面包含多个 POST 表单时，Flask 后端若直接访问 request.form 中不存在的键会触发 400 Bad Request 错误；应使用 in 操作符判断字段是否存在，或统一按钮 name 并区分 value 值来安全识别提交来源。

当 html 页面包含多个 post 表单时，flask 后端若直接访问 `request.form` 中不存在的键会触发 400 bad request 错误；应使用 `in` 操作符判断字段是否存在，或统一按钮 name 并区分 value 值来安全识别提交来源。

在 Flask 开发中，一个 HTML 页面内放置多个

是常见需求（如登录+注册并存、搜索+筛选共存等），但若后端未正确处理请求数据，极易因键缺失导致 400 Bad Request —— 这并非服务器配置或环境（如 Kali Linux）问题，而是逻辑缺陷：request.form 是一个类字典对象，仅包含当前被提交表单中成功发送的字段。当你点击“表单1”时，form_button_2 根本不会出现在 request.form 中；此时若执行 request.form["form_button_2"]，将触发 KeyError，Flask 默认将其转换为 HTTP 400 响应。

✅ 正确做法是先检查键是否存在，而非直接取值：

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        if "form_button_1" in request.form:
            return render_template('index.html', test_id="pressed form nr 1")
        elif "form_button_2" in request.form:
            return render_template('index.html', test_id="pressed form nr 2")

    return render_template('index.html', test_id="hasnt yet pressed form button")

? 注意：if request.form["form_button_1"]: 是危险写法 —— 即使按钮有值，若该键未提交（如用户点了另一个表单），就会报错。而 "key" in request.form 是安全、推荐的判断方式。

? 替代方案：复用同一 name，通过 value 区分行为（更简洁、可扩展性强）：

python-flask-vue-creator

创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。

下载

<!-- index.html -->

对应后端：

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        action = request.form.get("action")  # 使用 .get() 更健壮，返回 None 而非 KeyError
        if action == "submit_form1":
            return render_template('index.html', test_id="pressed form nr 1")
        elif action == "submit_form2":
            return render_template('index.html', test_id="pressed form nr 2")

    return render_template('index.html', test_id="hasnt yet pressed form button")

? 提示：