本文档旨在解决在使用 Flask 框架时，通过单个按钮提交多个 HTML 表单数据到后端的问题。核心思路是利用 JavaScript 的 XMLHttpRequest 对象异步发送表单数据，并在 Flask 后端接收和处理这些数据。文章将提供详细的代码示例，并解释关键步骤，帮助开发者理解和应用该技术。
问题背景
在 Web 开发中，有时需要将多个表单的数据一次性提交到服务器。如果使用传统的表单提交方式，可能会遇到只提交最后一个表单数据的问题。本教程将介绍如何使用 JavaScript 和 Flask 解决这个问题。
解决方案
核心思路是使用 JavaScript 的 XMLHttpRequest 对象，将每个表单的数据异步发送到 Flask 后端。具体步骤如下：
-
HTML 结构： 创建包含多个表单的 HTML 结构，并为每个表单设置唯一的 id 和 name 属性。同时，添加一个按钮，用于触发表单提交。
<!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)
代码解释
- 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 应用的交互性和用户体验。希望本教程能帮助你理解和应用该技术。
