使用单个按钮提交多个表单到 Flask 后端-html教程-PHP中文网

使用单个按钮提交多个表单到 Flask 后端

碧海醫心

发布： 2025-10-03 15:28:01

原创

248人浏览过

使用单个按钮提交多个表单到 flask 后端

本文档旨在解决在使用 Flask 框架时，通过单个按钮提交多个 HTML 表单数据到后端的问题。核心思路是利用 JavaScript 的 XMLHttpRequest 对象异步发送表单数据，并在 Flask 后端接收和处理这些数据。文章将提供详细的代码示例，并解释关键步骤，帮助开发者理解和应用该技术。

问题背景

在 Web 开发中，有时需要将多个表单的数据一次性提交到服务器。如果使用传统的表单提交方式，可能会遇到只提交最后一个表单数据的问题。本教程将介绍如何使用 JavaScript 和 Flask 解决这个问题。

解决方案

核心思路是使用 JavaScript 的 XMLHttpRequest 对象，将每个表单的数据异步发送到 Flask 后端。具体步骤如下：

HTML 结构： 创建包含多个表单的 HTML 结构，并为每个表单设置唯一的 id 和 name 属性。同时，添加一个按钮，用于触发表单提交。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

<!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">
    <title>Multiple Forms Submission</title>
</head>
<body>
    <form method ="post" id="f1" name = "form1" action="{{url_for('process')}}">
        <input type="text" name = "name1">
    </form>
    <form method ="post" id="f2" name="form2" action="{{url_for('process')}}">
        <input type="text" name = "name2">
    </form>

    <button type="button" value="submit" onclick="sub()">Submit</button>
</body>
</html>

登录后复制

JavaScript 代码： 编写 JavaScript 函数，该函数使用 XMLHttpRequest 对象异步发送每个表单的数据。使用 FormData 对象来收集表单数据。为了确保按顺序提交表单，可以使用 async/await 语法。

<script>
async function sub() {
    var form = new XMLHttpRequest();
    form.open(document.getElementById("f1").method, document.getElementById("f1").action);
    var p = new Promise(r => {
        form.onreadystatechange = function() {
            if (form.readyState === XMLHttpRequest.DONE && form.status === 200) r();
        }
    });
    form.send(new FormData(document.getElementById("f1")));
    await p;
    form = new XMLHttpRequest();
    form.open(document.getElementById("f2").method, document.getElementById("f2").action);
    p = new Promise(r => {
        form.onreadystatechange = function() {
            if (form.readyState === XMLHttpRequest.DONE && form.status === 200) r();
        }
    });
    form.send(new FormData(document.getElementById("f2")));
    await p;
    window.location.reload();
}
</script>

登录后复制

Flask 后端代码： 在 Flask 后端，创建一个路由来处理表单提交。可以使用 request.form 对象访问表单数据。

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('forms.html')

@app.route('/process', methods=['POST',"GET"])
def process():
    print(request.form)
    return "processed"

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

登录后复制