Flask应用中从HTML表单按钮获取变量值的实践指南

引言：前端数据到Flask后端的传递

在Web开发中，经常需要将用户在前端页面上的操作或选择的数据传递到后端服务器进行处理。对于Flask应用而言，从HTML表单中获取数据是常见的任务之一。本文将重点介绍如何通过HTML中的按钮元素，将动态生成的变量值（例如订单号、商品ID等）准确无误地传递给Flask后端进行处理。

HTML表单与按钮配置

要将按钮的值发送到服务器，必须将其包裹在一个 <form> 标签内，并正确配置该表单的提交方式。

表单方法 (Method) 的重要性

HTML表单通过 method 属性指定数据提交的方式。当我们需要将数据作为请求体的一部分发送到服务器时，应使用 method="post"。如果缺少此属性或设置为 get，按钮的值将作为URL查询参数发送，而不是通过 request.form 可访问的表单数据。

立即学习“前端免费学习笔记（深入）”；

按钮的 name 和 value 属性

在 <button> 标签中，name 属性定义了该数据在提交时对应的键，而 value 属性则包含了要发送的实际数据。当按钮被点击时，其 name 和 value 将作为键值对提交。value 属性可以动态地由后端模板引擎（如Jinja2）填充，例如 value="{{ i.invoice_no }}"。

示例代码：HTML

以下是一个典型的HTML表单和按钮的配置示例：

<form method="post">
    <th>
        <button class="btn btn-dark" name="invoice_no" value="{{ i.invoice_no }}">
            Select Invoice
        </button>
    </th>
</form>

请注意，method="post" 是确保数据通过POST请求发送的关键。

Flask后端数据接收与处理

在Flask应用中，request 对象是处理传入请求的核心。它包含了所有请求相关的信息，包括表单数据。

request 对象与请求方法判断

在处理表单提交时，首先需要判断请求的方法是否为 POST。这有助于区分用户初次访问页面（通常是 GET 请求）和提交表单（通常是 POST 请求）。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

从 request.form 获取数据

当表单以 POST 方法提交时，其数据会存储在 request.form 字典中。我们可以通过按钮的 name 属性作为键来获取其 value。推荐使用 request.form.get('key_name') 方法，因为它在键不存在时会返回 None，而不是抛出 KeyError，从而增加了代码的健壮性。

示例代码：Flask

以下是对应的Flask后端代码，用于接收并处理从HTML按钮提交的 invoice_no：

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/transactions', methods=['GET', 'POST'])
def handle_transactions():
    if request.method == "POST":
        # 从按钮获取invoice_no
        invoice = request.form.get('invoice_no')
        if invoice:
            print(f"Received invoice number: {invoice}")
            # 这里可以进行进一步的业务逻辑处理，例如查询数据库等
            return f"Invoice {invoice} processed successfully."
        else:
            return "Invoice number not found in form data.", 400

    # 对于GET请求或POST请求中没有invoice_no的情况
    # 假设这里会渲染一个包含发票列表的页面
    # 例如：return render_template('transactions.html', invoices=get_invoices_list())
    return "Please select an invoice to proceed.", 200

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

在这个示例中，当用户点击 "Select Invoice" 按钮时，如果表单方法为 POST，Flask应用将通过 request.form.get('invoice_no') 获取到 invoice_no 的值并进行打印或进一步处理。

工作原理简析

当HTML表单的 method="post" 属性被设置时，浏览器会将表单数据（包括被点击按钮的 name 和 value）编码并放入HTTP请求的请求体（request body）中发送给服务器。Flask的 request.form 对象正是用来解析这个请求体中以 application/x-www-form-urlencoded 或 multipart/form-data 格式提交的数据。相比之下，GET 请求会将数据附加到URL的查询字符串中，并通过 request.args 来访问。

注意事项

在实际开发中，处理表单数据还需要考虑以下几点：

• GET与POST的区别：

  • GET 请求主要用于获取资源，数据通过URL参数传递，不适合传输敏感信息或大量数据。
  • POST 请求主要用于提交数据，数据通过请求体传递，更适合传输敏感信息或大量数据。
  • 在教程场景中，由于按钮触发的是一个动作并传递特定数据，使用 POST 是更合理和安全的做法。

• 数据安全与验证： 从前端接收到的任何数据都应被视为不可信的。在将 invoice 号用于数据库查询或其他业务逻辑之前，务必进行严格的输入验证和清理，以防止SQL注入、跨站脚本 (XSS) 等安全漏洞。例如，可以检查 invoice 是否为预期的数字格式。

• 错误处理： 使用 request.form.get('key_name') 是一个好的实践，因为它避免了键不存在时程序崩溃。但仍需在获取数据后检查其是否为 None，并根据业务需求提供相应的错误反馈给用户。

• 用户体验： 在处理完按钮提交的请求后，通常需要重定向用户到另一个页面（例如，一个确认页面或列表页面），而不是简单地返回一段文本。这可以通过 redirect() 和 url_for() 函数实现。

总结

通过本文的讲解，我们了解了在Flask应用中从HTML表单按钮获取变量值的关键步骤。核心在于确保HTML表单使用 method="post" 属性，并在Flask后端通过 request.method == "POST" 判断请求类型，然后利用 request.form.get('按钮的name属性') 来安全地获取所需数据。遵循这些最佳实践，可以构建出健壮且功能完善的Flask Web应用。