本文档旨在解决在使用 Flask 框架时，通过单个按钮提交多个 HTML 表单数据到后端的问题。核心思路是利用 JavaScript 的 XMLHttpRequest 对象异步发送表单数据，并在 Flask 后端接收和处理这些数据。文章将提供详细的代码示例，并解释关键步骤，帮助开发者理解和应用该技术。
问题背景
在 Web 开发中，有时需要将多个表单的数据一次性提交到服务器。如果使用传统的表单提交方式，可能会遇到只提交最后一个表单数据的问题。本教程将介绍如何使用 JavaScript 和 Flask 解决这个问题。
解决方案
核心思路是使用 JavaScript 的 XMLHttpRequest 对象，将每个表单的数据异步发送到 Flask 后端。具体步骤如下：
HTML 结构： 创建包含多个表单的 HTML 结构，并为每个表单设置唯一的 id 和 name 属性。同时，添加一个按钮，用于触发表单提交。
Multiple Forms Submission
JavaScript 代码： 编写 JavaScript 函数，该函数使用 XMLHttpRequest 对象异步发送每个表单的数据。使用 FormData 对象来收集表单数据。为了确保按顺序提交表单，可以使用 async/await 语法。
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();}
Flask 后端代码： 在 Flask 后端，创建一个路由来处理表单提交。可以使用 request.form 对象访问表单数据。
from flask import Flask, request, render_templateapp = 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 应用的交互性和用户体验。希望本教程能帮助你理解和应用该技术。
以上就是使用单个按钮提交多个表单到 Flask 后端的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580751.html
微信扫一扫 
支付宝扫一扫 
