Flask中使用MySQLdb提取列值生成下拉框异常问题

问题现象 #

用Flask从MySQL数据库获取数据渲染下拉框时，预期每个option的value为水果ID，显示文本为水果名称，但实际渲染后value为空，显示内容是数据库记录的元组字符串。

预期渲染结果：

<option value="1">Appels</option>
<option value="2">Bananas</option>
<option value="3">Cherries</option>
<option value="4">Peaches</option>

实际渲染结果：

<option value=""> (1, &#39;Appels&#39;) </option>
<option value=""> (2, &#39;Bananas&#39;) </option>
<option value=""> (3, &#39;Cherries&#39;) </option>
<option value=""> (4, &#39;Peaches&#39;) </option>

问题原因 #

1. cursor.fetchall()返回的是元组列表，每个元素是(id, type)格式的元组，比如[(1, 'Appels'), (2, 'Bananas')...]
2. 模板中循环变量type实际指代整个元组，直接输出会显示元组的字符串形式
3. 模板中的{{ id }}未定义，导致option的value属性为空

解决方案 #

方案一：模板中直接解构元组 #

修改HTML模板，循环时将元组拆分为ID和类型两个变量：

<select name="fldFruitPicker" class="form-select form-select-sm">
{% for fruit_id, fruit_type in fruit %}
<option value="{{ fruit_id }}"> {{ fruit_type }} </option>
{% endfor %}
</select>

通过fruit_id, fruit_type拆分元组，分别对应option的value和显示文本。

方案二：后端返回字典列表（可读性更强） #

在后端将查询结果转为字典列表，模板中通过字段名直接访问：

@app.route('/testbed', methods = ['POST', 'GET'])
def testbed():
    cursor = mysql.connection.cursor(dictionary=True)  # 开启字典模式
    cursor.execute("SELECT id, type FROM fruit")
    fruit = cursor.fetchall()
    return render_template('testbed.html', fruit=fruit)

模板中用键名访问数据：

<select name="fldFruitPicker" class="form-select form-select-sm">
{% for item in fruit %}
<option value="{{ item.id }}"> {{ item.type }} </option>
{% endfor %}
</select>

dictionary=True参数会让游标返回字典而非元组，字典的键对应数据库字段名。

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