Flask中用fetch实现多表单无刷新提交数据的技术问询

前端实现（HTML + JavaScript） #

先给GroupA表单添加唯一ID，方便JS定位：

<form id="groupA-form">
  <input type="text" name="username" placeholder="用户名" required>
  <input type="email" name="email" placeholder="邮箱" required>
  <button type="submit">提交GroupA数据</button>
</form>
<!-- 用于显示提交结果的容器 -->
<div id="groupA-result"></div>

然后编写JS逻辑，阻止默认刷新、自动收集表单数据并通过fetch发送请求：

const form = document.getElementById('groupA-form');
const resultDiv = document.getElementById('groupA-result');

form.addEventListener('submit', async (e) => {
  // 阻止表单默认跳转刷新
  e.preventDefault();
  
  // 直接传入表单元素创建FormData，自动收集所有带name属性的输入字段
  const formData = new FormData(form);
  
  try {
    const response = await fetch('/submit-groupA', {
      method: 'POST',
      body: formData // FormData会自动设置正确的请求头，无需手动指定Content-Type
    });
    
    const data = await response.json();
    if (data.success) {
      resultDiv.textContent = '提交成功！';
      resultDiv.style.color = 'green';
      // 可选：提交后清空表单
      form.reset();
    } else {
      resultDiv.textContent = `提交失败：${data.message}`;
      resultDiv.style.color = 'red';
    }
  } catch (error) {
    resultDiv.textContent = '网络错误，请稍后重试';
    resultDiv.style.color = 'red';
  }
});

核心提示：new FormData(form)会自动抓取表单内所有带name属性的输入（包括文本框、单选/复选框、下拉框等），不用手动逐个添加键值对，高效省心。

Flask后端实现（app.py） #

在Flask中通过request.form直接获取FormData里的文本数据（如果涉及文件上传，改用request.files）：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/submit-groupA', methods=['POST'])
def submit_groupA():
    # 用get方法获取字段，避免键不存在时抛出错误
    username = request.form.get('username')
    email = request.form.get('email')
    
    # 这里替换为你的业务逻辑，比如数据验证、存入数据库等
    if not username or not email:
        return jsonify({'success': False, 'message': '用户名和邮箱不能为空'})
    
    # 示例：打印接收的数据（实际项目替换为业务操作）
    print(f"GroupA提交数据：用户名={username}，邮箱={email}")
    
    # 返回JSON格式的响应给前端
    return jsonify({'success': True, 'message': '数据提交成功'})

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

多表单复用提示 #

你的5个表单可以复用这套逻辑：给每个表单设置不同ID，复制JS代码后修改表单ID和对应后端路由（比如GroupB对应/submit-groupB，后端新增同名路由处理函数即可）。

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