从下拉菜单传递值到Flask模板

Question

我在HTML下拉菜单中选择项目后，无法将其传递给SQL查询。我不确定我的代码缺少哪些概念才能使其工作。我发现的大多数示例都是使用PHP编写的，我不知道如何将其翻译成Python。

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

例如，用户从具有3个选项（Red、Blue、Green）的下拉菜单中选择“Red”，然后单击提交按钮。 "Red" 将传递到我的app.py文件中的SQL查询中，该查询将检索所有颜色为"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 %}

- Alex

Answer 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">

- dirn

---

在我的表单中，对于 action= ，我是将所选值传递到最终显示结果的页面（/results.html），还是传递到处理带有所选值的 SQL 查询的 Python 脚本（app.py）？ - Alex

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

Answer 2

如@dim所提到的，将选择器放在表单内，可以使用request.form['Item_1']获取所选值。但是被查询的项目是一个选择器，因此我更喜欢使用GET而不是POST。从维基百科中了解到http://en.wikipedia.org/wiki/POST_(HTTP)，POST用于

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

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

- Veerabahu