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

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

问题背景

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

解决方案

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

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

   

   东区网上书店

   功能简介：多用户管理分权限发布、管理书籍资料。大类小类两级无限制软件分类、无限制添加书籍资料。资料批量删除、批量分类转移等批量管理功能。采用交互性的订单处理方式客户管理功能会员制度，分VIP会员和一般会员，并提供不同的优惠书本评论、管理功能。完善而方便的书籍资料添加、编辑表单，无组件图片上传。强大的搜索功能，可以按各个字段进行不同方式的高级搜索。付款方式管理网站后台管理员用户名和密码都是：admi

   下载

   
   
   
       
       
       
       
   
   
       
   
           
       
       
   
           
       
   
       Submit
   
   

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

3. 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)

代码解释

• XMLHttpRequest 对象： 用于异步发送 HTTP 请求。
• FormData 对象： 用于收集表单数据。
• async/await 语法： 用于确保表单按顺序提交。await p 会等待Promise p resolve后再执行后面的代码。
• request.form 对象： 在 Flask 后端，用于访问表单数据。

注意事项

• 确保每个表单都有唯一的 id 和 name 属性。
• 在 JavaScript 代码中，使用 FormData 对象来收集表单数据。
• 在 Flask 后端，使用 request.form 对象访问表单数据。
• 如果需要处理多个表单的数据，可以在 Flask 后端循环遍历 request.form 对象。
• 可以根据实际需求修改 JavaScript 代码和 Flask 后端代码。

总结

通过使用 JavaScript 的 XMLHttpRequest 对象和 Flask 框架，可以轻松地实现使用单个按钮提交多个表单数据到后端的功能。这种方法可以提高 Web 应用的交互性和用户体验。希望本教程能帮助你理解和应用该技术。