Flask获取HTML select标签值失败，请求技术帮助

你的代码存在多个关键错误，导致无法获取select值并触发变量未定义报错，以下是问题解析和修正方案：

核心错误点 #

• 变量作用域错误：action、num1、num2仅在request.method == "POST"的代码块内定义，外部判断逻辑无法访问这些变量，这是报错的直接原因。
• 表单数据获取方式错误：request.form是字典类型，需用request.form['字段名']或request.form.get('字段名')调用，你使用的request.form("act")是语法错误。
• 逻辑顺序颠倒：计算逻辑写在POST请求处理代码块外，还未执行计算就触发了redirect，根本无法获取计算结果val。
• 表单提交目标错误：HTML表单的action="#"会提交到当前页面，未指向负责处理的/calc路由。
• 数值类型未转换：表单获取的是字符串，直接传入加减乘除函数会触发类型错误。
• 路由参数定义错误：/value路由未定义参数占位符，无法接收传递的计算结果。

修正后的Python代码 #

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

app = Flask(__name__)

def add(x , y):
    return x + y

def subtract(x , y):
    return x - y

def multiply(x , y):
    return x * y

def divide(x , y):
    # 增加除零判断
    if y == 0:
        return "Error: 不能除以零"
    return x / y

@app.route('/')
def home():
    return render_template("index.html")

@app.route('/calc', methods=["POST","GET"])
def calc():
    if request.method == "POST":
        # 正确获取表单数据并转换为数值类型，增加异常处理
        try:
            num1 = float(request.form.get('1nm'))
            num2 = float(request.form.get('2nm'))
            action = request.form.get('act')
        except ValueError:
            return render_template("calc.html", error="请输入有效的数字")
        
        val = None
        # 注意action是字符串，需与字符串值比较
        if action == "1":
            val = add(num1, num2)
        elif action == "2":
            val = subtract(num1, num2)
        elif action == "3":
            val = multiply(num1, num2)
        elif action == "4":
            val = divide(num1, num2)
        else:
            return render_template("calc.html", error="请选择运算类型")
        
        return redirect(url_for('value', value=val))
    # GET请求时返回计算器页面
    return render_template("calc.html")

# 修正路由参数定义，添加占位符
@app.route("/value/<value>")
def value(value):
    return f"<h1>计算结果: {value}</h1>"

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=80, debug=True)

修正后的HTML代码 #

{% extends 'base.html' %}
{%block content%}
<!-- 显示错误提示（如果存在） -->
{% if error %}
<p style="color: red;">{{ error }}</p>
{% endif %}
<!-- 表单action指向负责处理的/calc路由 -->
<form action="/calc" method="POST">
    <input type="text" name="1nm" placeholder="第一个数字" required/>  
    <label for="act"> <!-- 修正label属性为for，关联对应select元素 -->
        <select name="act" id="act" required>
            <option value="" >请选择运算</option>
            <option value="1" >加法</option>
            <option value="2" >减法</option>
            <option value="3" >乘法</option>
            <option value="4" >除法</option>
        </select>
    </label>
    <input type="text" name="2nm" placeholder="第二个数字" required/>
    <input type="submit" value="计算"/>
</form>
{%endblock%}

额外优化说明 #

• 增加了异常处理：用户输入非数字内容时返回错误提示，避免程序崩溃。
• 修正label属性：将错误的form属性改为标准的for属性，正确关联select元素。
• 添加表单校验：给控件加上required属性，强制用户完成输入和运算选择。
• 增加除零判断：除法操作时检测除数是否为零，返回友好错误提示。

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