使用单个按钮提交多个表单：Flask 后端数据处理指南-html教程-PHP中文网

使用单个按钮提交多个表单：Flask 后端数据处理指南

聖光之護

发布： 2025-10-03 11:08:13

原创

944人浏览过

使用单个按钮提交多个表单：flask 后端数据处理指南

本文档旨在解决使用单个按钮提交多个 HTML 表单时，Flask后端如何正确接收和处理所有表单数据的问题。通过JavaScript异步提交表单数据，并在Flask后端利用request.form访问这些数据，本文将提供一个清晰的实现方案，并附带代码示例，帮助开发者理解和应用该技术。

问题描述

在Web开发中，有时需要使用一个按钮来提交多个表单。然而，直接使用JavaScript的form.submit()方法会导致只有最后一个提交的表单数据被Flask后端接收到。这是因为同步提交表单会导致页面刷新，后续表单的提交会覆盖之前的请求。

解决方案：使用 AJAX 异步提交表单

为了解决这个问题，我们可以使用 AJAX (Asynchronous JavaScript and XML) 异步提交表单数据。这样，每个表单都可以独立地提交到后端，而不会导致页面刷新。

前端代码 (HTML 和 JavaScript)

以下是修改后的 HTML 和 JavaScript 代码：

<!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>

    <script>
        async function sub() {
            // Submit form 1
            await submitForm("f1");

            // Submit form 2
            await submitForm("f2");

            // Optional: Reload the page after submission
            window.location.reload();
        }

        async function submitForm(formId) {
            const form = document.getElementById(formId);
            const formData = new FormData(form);

            try {
                const response = await fetch(form.action, {
                    method: form.method,
                    body: formData,
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                // Optionally process the response from the server
                const result = await response.text();
                console.log(`Form ${formId} submission result:`, result);

            } catch (error) {
                console.error(`Error submitting form ${formId}:`, error);
            }
        }
    </script>
</body>
</html>

登录后复制

代码解释:

submitForm(formId) 函数: 这个函数负责异步提交单个表单。

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

74

查看详情
- 它获取指定 ID 的表单元素。
- 使用 FormData 对象从表单中提取数据。
- 使用 fetch API 发送 POST 请求到表单的 action 属性指定的 URL。
- 处理响应，并在控制台中记录结果。
sub() 函数: 这个函数是按钮点击时调用的。
- 它依次调用 submitForm() 函数来提交每个表单。
- 使用 await 关键字确保每个表单都已提交完成，然后再提交下一个表单。
- 最后，可选地重新加载页面。

后端代码 (Flask)

以下是 Flask 后端代码：

from flask import Flask, request, render_template

app = Flask(__name__)

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

@app.route('/process', methods=['POST'])
def process():
    form1_data = {}
    form2_data = {}

    if 'name1' in request.form:
        form1_data['name1'] = request.form['name1']

    if 'name2' in request.form:
        form2_data['name2'] = request.form['name2']

    print("Form 1 Data:", form1_data)
    print("Form 2 Data:", form2_data)

    return "Processed"

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

登录后复制

代码解释: