将下拉菜单中的值传递给 Flask 模板

Posted 2023-02-23

【中文标题】将下拉菜单中的值传递给 Flask 模板

【英文标题】：Passing value from a drop down menu to a Flask template

【发布时间】：2014-06-26 17:57:09

【问题描述】：

我在将一个从 html 下拉菜单中选择的项目传递给 SQL 查询时遇到问题。

我不确定我的代码中缺少什么概念来完成这项工作。我发现的大多数示例都是用 php 编写的，我不知道如何将其转换为 Python。

这里是场景。我正在使用 Flask 和 Sqlite，并尝试让用户从 HTML 下拉菜单中选择一个项目。从下拉菜单中选择的项目将在 SQL 查询中用于从数据库中检索信息，然后在新页面上显示这些结果。

例如，用户从具有 3 个选项（红色、蓝色、绿色）的下拉菜单中选择“红色”，然后单击提交按钮。 “Red”将传递给我的 app.py 文件中的 SQL 查询，该查询将从 color = “Red”的行中检索所有数据。然后，检索到的数据将显示在 /results.html 上。

我认为我的问题是我没有正确地为下拉菜单中的项目分配一个值，然后将该值传递给运行 SQL 查询的 Python 代码。这是我对它应该如何工作的假设，但我可能在这里遗漏了一些更大的东西。

我已经尝试了很多 HTML 来完成这项工作，但我什至不确定这是我的问题所在。当我点击“提交”时，我正在进入新页面，但没有显示数据库中的任何内容

这是我的代码，用于我的 2 个视图（'/' & 'results.html'）和我的 Python 代码：

@app.route('/results.html', methods=['GET','POST'])
def results():
    g.db = connect_db()

    cur = g.db.execute("SELECT * FROM all_items WHERE name = ''".format('Red'))
    posts = [dict(item=row[0], name=row[1]) for row in cur.fetchall()]
    g.db.close()
    return render_template('results.html', posts=posts)

这里是下拉菜单所在的视图

<select name="Item_1">
    <option value="Red">Red</option>
    <option value="Green">Green</option>        
</select>

<form name="Item_1" action="results.html" method='POST'>
    <button type="submit">Compare!</button>
</form>

这是应显示选择“红色”的结果的视图

% extends "template.html" %
% block content %
<h2>Results</h2>

% for p in posts %
    <strong>Item:</strong>  p.item 
    <strong>Name:</strong>  p.name  
% endfor %
% endblock %

【参考方案1】：

您需要将select 放入form。

<form name="Item_1" action="results.html" method='POST'>
    <select name="Item_1">
        <option value="Red">Red</option>
        <option value="Green">Green</option>        
    </select>
    <button type="submit">Compare!</button>
</form>

声明form 的更好方法是

<form name="Item_1" action=" url_for('results') " method="POST">

【讨论】：

在我的表单中，对于 action=，我是将所选值传递给我希望最终显示结果的页面 (/results.html) 还是传递给处理 SQL 查询的 python 脚本选择的值（app.py）？

action 属性应与 URL 匹配。我已更新我的答案，向您展示如何使用 url_for 填充值。

【参考方案2】：

正如@dim 所提到的，将选择放在表单中，可以使用request.form['Item_1'] 获得选择的值。然而，被查询的项目是一个选择，所以我更喜欢使用 get 而不是 POST。来自 wiki，http://en.wikipedia.org/wiki/POST_(HTTP)，在

时使用 POST POST 请求方法旨在请求 Web 服务器接受包含在请求消息正文中的数据以进行存储。 [1]它通常在上传文件或提交完整的 Web 表单时使用。

所以我更喜欢 GET，它可以用来查询数据库。使用GET时，Item_1可以作为请求参数传递，使用flask.request.args获取