如何在Flask中从HTML按钮获取变量值-html教程-PHP中文网

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

聖光之護

发布： 2025-10-25 09:26:47

原创

340人浏览过

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

本教程详细讲解了如何在flask应用中，通过html表单的post请求，安全有效地从按钮（或其他表单元素）获取动态变量值。我们将重点介绍html `

` 标签的 `method` 属性配置，以及flask后端如何使用 `request.form` 对象正确解析提交的数据，并提供完整的代码示例。

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

理解表单数据提交机制

当用户与网页上的表单交互并提交时，浏览器会将表单数据打包并发送到服务器。这个发送过程的关键在于HTML <form> 标签的 method 属性。method 属性决定了数据如何被发送，主要有两种方式：GET 和 POST。

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

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

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

对于从按钮获取动态值并进行某种操作（例如选择一个发票），通常推荐使用 POST 请求，因为它更适合处理状态变更和非幂等操作。

HTML 表单设计：按钮与变量

为了将按钮上的动态值发送到Flask后端，我们需要正确配置HTML表单和按钮。

<form> 标签： 必须包含 method="post" 属性。
<button> 标签：
- type="submit"：确保按钮能够触发表单提交。
- name="variable_name"：这是在后端用于识别数据的键。
- value="{{ dynamic_value }}"：这是按钮被点击时发送到服务器的值。Jinja2模板引擎可以用来动态地填充这个值。

示例HTML代码 (templates/index.html)：

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择发票</title>
    <!-- 引入Bootstrap或其他CSS框架，如果需要 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1>发票列表</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>发票号</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for invoice in invoices %}
                <tr>
                    <td>{{ invoice.invoice_no }}</td>
                    <td>
                        <!-- 关键：form 标签必须有 method="post" -->
                        <form action="/transactions" method="post">
                            <!-- 按钮的 name 和 value 属性 -->
                            <button type="submit" class="btn btn-dark" name="invoice_no" value="{{ invoice.invoice_no }}">
                                选择发票
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</body>
</html>

登录后复制

在上述HTML代码中，我们为每个发票创建了一个独立的 <form>，并将其 method 设置为 post。按钮的 name 属性是 invoice_no，其 value 属性通过Jinja2动态地设置为 {{ invoice.invoice_no }}。当用户点击“选择发票”按钮时，invoice_no 的值将通过POST请求发送到 /transactions 路由。

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)

登录后复制

代码解释：

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

运行与测试

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

注意事项

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