如何在Flask中从HTML按钮获取变量值

在Web开发中，从用户界面（HTML）收集数据并将其传递到后端服务器（Flask）是一个核心功能。当用户点击一个按钮时，如果该按钮承载了特定的数据（例如一个发票号），我们需要确保这些数据能够被Flask应用正确接收和处理。本教程将深入探讨这一过程，特别是当数据通过HTML按钮的 value 属性传递时。

理解表单数据提交机制

当用户与网页上的表单交互并提交时，浏览器会将表单数据打包并发送到服务器。这个发送过程的关键在于HTML

GET vs. POST：选择正确的提交方法

1. GET 请求：

   • 特点： 数据会附加在URL的查询字符串中。例如，如果表单字段 name="invoice_no" 的值为 3，提交后URL可能变为 /transactions?invoice_no=3。
   • 适用场景： 适用于不敏感、幂等（多次请求结果相同）的操作，如搜索查询、页面导航、书签。
   • Flask中获取数据： 在Flask后端，通过 request.args.get('invoice_no') 来获取GET请求中的数据。
   • 默认行为： 如果在 标签中不指定 method 属性，它将默认为 GET。

2. POST 请求：

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

   • 特点： 数据放在HTTP请求体中，不会显示在URL中，因此更适合发送敏感信息（如密码）或大量数据。
   • 适用场景： 适用于数据创建、修改、删除等操作，或发送包含敏感信息的表单。
   • Flask中获取数据： 在Flask后端，通过 request.form.get('invoice_no') 来获取POST请求中的数据。
   • 显式指定： 必须在
     标签中显式指定 method="post"。

Flask 后端处理：接收与解析数据

在Flask应用中，我们需要创建一个路由来处理来自HTML表单的POST请求，并从中提取数据。

示例Flask代码 (app.py)：

from flask import Flask, render_template, request, redirect, url_for, flash

app = Flask(__name__)
app.secret_key = 'super_secret_key' # 用于flash消息等，生产环境应更复杂

# 模拟发票数据
mock_invoices = [
    {'invoice_no': 1001, 'amount': 150.00},
    {'invoice_no': 1002, 'amount': 230.50},
    {'invoice_no': 1003, 'amount': 75.20}
]

@app.route('/')
def index():
    """渲染显示发票列表的页面"""
    return render_template('index.html', invoices=mock_invoices)

@app.route('/transactions', methods=['POST'])
def handle_transaction():
    """处理来自HTML表单的POST请求，获取发票号"""
    # 检查请求方法是否为POST
    if request.method == "POST":
        # 使用 request.form.get() 安全地获取数据
        # 'invoice_no' 对应于HTML按钮的 name 属性
        invoice_number = request.form.get('invoice_no')

        if invoice_number:
            print(f"从按钮获取到的发票号是: {invoice_number}")
            flash(f"已成功选择发票号: {invoice_number}", 'success')
            # 可以在这里执行进一步的业务逻辑，例如查询数据库、更新状态等
            # 示例：重定向回首页或显示详情页
            return redirect(url_for('index'))
        else:
            flash("未接收到发票号。", 'danger')
            return redirect(url_for('index'))
    # 如果不是POST请求，理论上不会进入这里，但作为良好实践可以处理
    flash("请求方法不正确。", 'danger')
    return redirect(url_for('index'))

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

代码解释：

1. @app.route('/transactions', methods=['POST'])： 这个装饰器定义了一个路由，它只响应 POST 请求。如果收到 GET 请求，Flask会返回“Method Not Allowed”错误。
2. if request.method == "POST":： 尽管路由已经指定了 methods=['POST']，但在视图函数内部再次检查 request.method 是一种良好的编程习惯，以确保代码逻辑只在正确的请求类型下执行。
3. invoice_number = request.form.get('invoice_no')： 这是从POST请求体中获取数据的关键。
   • request.form 是一个字典状的对象，包含了所有通过POST请求提交的表单数据。键是HTML元素的 name 属性值，值是对应的 value 属性值。
   • .get('invoice_no') 方法用于安全地获取键为 invoice_no 的值。如果该键不存在，它会返回 None，而不是抛出 KeyError，这使得代码更加健壮。
4. print(f"从按钮获取到的发票号是: {invoice_number}")： 打印接收到的发票号，用于调试。在实际应用中，您会在这里调用业务逻辑层来处理这个发票号。
5. flash() 和 redirect()： 用于提供用户反馈并重定向到其他页面，提升用户体验。

运行与测试

1. 将上述Flask代码保存为 app.py。
2. 在与 app.py 同级的目录下创建 templates 文件夹。
3. 将上述HTML代码保存为 templates/index.html。
4. 运行Flask应用：python app.py。
5. 在浏览器中访问 http://127.0.0.1:5000/。
6. 点击任意一个“选择发票”按钮。
7. 查看Flask控制台输出，您将看到类似 从按钮获取到的发票号是: 1001 的信息。

注意事项

• 安全性： 永远不要直接信任来自客户端的数据。即使数据来自按钮的 value 属性，恶意用户也可以通过浏览器开发者工具修改这些值。在服务器端，务必对接收到的数据进行验证、清理和消毒，以防止SQL注入、XSS等安全漏洞。
• 表单验证： 对于更复杂的表单，建议使用Flask-WTF等扩展来简化表单的创建和验证过程。
• 用户体验： 提交表单后，应向用户提供明确的反馈（例如，成功消息、错误消息或重定向到相关页面），而不是仅仅打印到控制台。
• CSRF 保护： 对于所有处理用户提交数据的POST请求，尤其是在生产环境中，务必实施CSRF（跨站请求伪造）保护。Flask-WTF提供了方便的CSRFToken支持。
• HTTP 方法的语义： 遵循HTTP方法的语义。GET 用于获取资源，POST 用于提交数据创建/修改资源。不要混淆使用。

总结

通过本教程，我们详细了解了如何在Flask应用中从HTML按钮获取动态变量值。关键在于：

1. HTML 标签必须明确指定 method="post"。 这是将数据通过请求体发送到服务器的基础。
2. HTML 标签的 name 属性定义了在后端访问数据的键，value 属性则承载了要发送的数据。
3. Flask 后端使用 request.form.get('name_attribute') 来安全地获取 POST 请求中提交的数据。