Flask项目中存在的产品经HTML表单传参后提示未找到的问题

问题场景 #

我正在做一个技术实践：HTML表单向Flask服务端发送数据，服务端接收后执行查询，再把结果返回渲染到HTML页面。具体操作：

1. 在index.html里用<form>标签定义表单，通过action属性把产品名"mouse"传到URL /products/mouse，该产品已在products.py的字典数组中定义；
2. 预期流程：index()函数获取参数后调用getProduct()查询产品，返回结果渲染到index.html；
   但实际运行时，index.html页面显示“Producto no encontrado（产品未找到）”。

相关代码 #

app.py #

from flask import Flask, jsonify, request, render_template, redirect, url_for
from products import products

app = Flask(__name__)

@app.route('/')
def index():
    product_nombre = request.args.get('product_nombre', 'punto control')
    data = getProduct(product_nombre)
    return render_template('index.html', data=data)

@app.route('/products/<string:product_nombre>', methods=['GET'])
def getProduct(product_nombre):
    for product in products:
        if product['nombre'] == product_nombre:
            return product
    return "Producto no encontrado"

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

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/products/mouse" method="get">
        <h2 id=>Hola mundo</h2>
        <h4> {{ data }}</h4>
    </form>
</body>
</html>

products.py #

products = [ 
    {"nombre": "laptop",
    "precio": 800,
    "cantidad": 4},
    {"nombre": "mouse",
    "precio": 40,
    "cantidad": 10},
    {"nombre": "monitor",
    "precio": 250,
    "cantidad": 3}
    ]

错误原因 #

1. 表单提交路径错误：表单的action设为/products/mouse，提交后会直接跳转到这个路由，但该路由的getProduct函数仅返回纯文本或JSON数据，不会渲染index.html页面。你看到的“产品未找到”其实是访问根路径/时的结果——因为此时没有传递product_nombre参数，代码使用了默认值punto control，而这个产品不存在，所以getProduct返回了提示文本。
2. 视图函数直接调用错误：index函数里直接调用了getProduct这个Flask视图函数，视图函数的返回值是供Flask处理的响应对象，并非直接返回产品数据，这种调用方式会导致逻辑混乱。

修复方案 #

步骤1：提取独立查询函数，避免直接调用视图函数 #

修改app.py，把产品查询逻辑抽成单独的工具函数，让视图函数都调用这个函数：

from flask import Flask, jsonify, request, render_template, redirect, url_for
from products import products

app = Flask(__name__)

# 独立的产品查询函数，专门处理数据查找
def find_product(product_nombre):
    for product in products:
        if product['nombre'] == product_nombre:
            return product
    return None

@app.route('/')
def index():
    product_nombre = request.args.get('product_nombre')
    data = None
    if product_nombre:
        data = find_product(product_nombre)
    # 处理未找到或无参数的情况
    if not data:
        data = "Producto no encontrado"
    return render_template('index.html', data=data)

@app.route('/products/<string:product_nombre>', methods=['GET'])
def getProduct(product_nombre):
    product = find_product(product_nombre)
    if product:
        return jsonify(product)
    return "Producto no encontrado", 404

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

步骤2：修正表单提交逻辑，让请求走根路径并传参 #

修改index.html的表单，将action设为根路径/，通过隐藏字段或输入框传递产品名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Query</title>
</head>
<body>
    <!-- 固定查询mouse的表单 -->
    <form action="/" method="get">
        <input type="hidden" name="product_nombre" value="mouse">
        <button type="submit">查询Mouse</button>
        <h2>Hola mundo</h2>
        <h4>{{ data }}</h4>
    </form>

    <!-- 如果需要动态查询，改用这个表单 -->
    <!-- <form action="/" method="get">
        <input type="text" name="product_nombre" placeholder="输入产品名">
        <button type="submit">查询产品</button>
        <h2>Hola mundo</h2>
        <h4>{{ data }}</h4>
    </form> -->
</body>
</html>

这样修改后，提交表单时会携带product_nombre=mouse参数访问根路径/，index函数会获取参数并查询到对应的产品，最终渲染到index.html页面中。

内容的提问来源于stack exchange，提问作者Charly