烧瓶从自动完成传递选定的值并执行 SQL 查询以打印结果
Posted
技术标签:
【中文标题】烧瓶从自动完成传递选定的值并执行 SQL 查询以打印结果【英文标题】：Flask passing selected value from autocomplete and do SQL query to print the result 【发布时间】：2017-12-14 13:14:24 【问题描述】：我是 Flask（和 Web 开发）的新手，我正在尝试从自动完成中获取选定的值并将该值传递给 SQL，最后在 html 上打印表格。
这是我的 html 中的 javascript
<head>
<script type="text/javascript">
$(function()
$("#autocomplete").autocomplete(
source:function(request, response)
$.getJSON("/autocomplete",
q: request.term,
, function(data)
response(data.matching_results);
);
,
minLength: 2,
select: function(event, ui)
alert( "You selected: " + ui.item.label );
console.log(ui.item.value);
);
)
</script>
</head>
<body>
<div>
<form class="form-horizontal" method="post" action="/showSelection">
<h3>Genes</h3>
<input name="autocomplete" name="inputGene" type="text" placeholder="Gene name" id="autocomplete" class="form-control input-lg"/ >
</form>
</div>
</body>
在我的 app.py 中（到目前为止我想出了什么，（自动完成部分正在工作，但我不确定如何获取值并使用该值来查询 SQL）
@app.route('/autocomplete', methods=['GET', 'POST'])
def autocomplete():
czz = mysql.connect()
cursor=czz.cursor()
search = request.args.get('q')
query = ("SELECT Symbol from drugs where Symbol like '%"+search+"%'")
cursor.execute(query)
symbols = cursor.fetchall()
# query = metadata.query(drugs.Symbol).filter(drugs.Symbol.like('%' + str(search) + '%'))
results = [mv[0] for mv in symbols]
return jsonify(matching_results=results)
czz.close()
cursor.close()
@app.route('/showSelection', methods=['POST'])
def showSelection():
pd.set_option('display.max_colwidth', -1)
_Gene = request.form.get('inputGene')
# _Gene = request.form['inputGene']
_Gene = str(_Gene)
print str(_Gene)
conn = mysql.connect()
cursor = conn.cursor()
query=("SELECT * from tbl_wish where gene_name = %s")%(_Gene)
cursor.execute(query)
variant=cursor.fetchall()
print variant
vas_dict=[]
for vas in variant:
vaf_dict =
'Gene':vas[1],
'Literature':vas[2],
'Variant':vas[3],
'Description':vas[4]
vas_dict.append(vaf_dict)
variants = pd.DataFrame(vas_dict)
variants = variants[['Gene','Literature','Variant','Description']]
#print variants
return render_template('listVariants.html', tables=[variants.to_html(index=False)], titles=["Variant list"])
cnn.close()
cursor.close()
感谢任何帮助！
【问题讨论】：
你能把你的路线发给/autocomplete吗？
@Adam，更新为 /autocomplete 路线
嗨亚当，自动完成部分正在工作，但我不确定如何获取值并使用该值查询 SQL
首先你需要将关闭mysql连接和光标移动到return语句的上方。 return 语句之后什么都没有实际执行。您应该在连接之前关闭光标。 ***.com/a/17665827/3990806
另外，您不需要在自动完成路线上使用 'POST' 方法。
【参考方案1】：
自动完成
@app.route('/autocomplete', methods=['GET'])
def autocomplete():
conn = mysql.connect()
cursor = conn.cursor()
search = request.args.get('q')
query = ("SELECT Symbol from drugs where Symbol like '%"+search+"%'")
cursor.execute(query)
symbols = cursor.fetchall()
# query = metadata.query(drugs.Symbol).filter(drugs.Symbol.like('%' + str(search) + '%'))
results = [mv[0] for mv in symbols]
cursor.close()
conn.close()
return jsonify(matching_results=results)
显示路线
@app.route('/showSelection', methods=['GET', 'POST'])
def showSelection():
gene = request.form.get('inputGene') # Returns none if not found in request
if gene is None:
flash('gene not found')
return redirect(url_for('selection view')) # redirect on input
conn = mysql.connect()
cursor = conn.cursor()
query = ("SELECT * from tbl_wish where gene_name = %s")%(gene)
cursor.execute(query)
variant = cursor.fetchall()
vas_dict = []
for vas in variant:
vaf_dict =
'Gene':vas[1],
'Literature':vas[2],
'Variant':vas[3],
'Description':vas[4]
vas_dict.append(vaf_dict)
cursor.close()
conn.close()
return render_template('listVariants.html', variants=vas_dict)
select.html
<head>
<script type="text/javascript">
$(function()
$("#inputGene").autocomplete(
source:function(request, response)
$.getJSON("/autocomplete",
q: request.term,
, function(data)
response(data.matching_results);
);
,
minLength: 2,
select: function(event, ui)
alert( "You selected: " + ui.item.label );
console.log(ui.item.value);
);
)
</script>
</head>
<body>
<div>
<form class="form-horizontal" method="post" action="/showSelection">
<h3>Genes</h3>
<input name="inputGene" type="text" placeholder="Gene name" id="inputGene" class="form-control input-lg"/ >
</form>
</div>
</body>
1) 您的输入字段有两个names，而且应该只有一个
2) 您可以从自动完成路由中删除 'POST' 方法，因为它是不必要的
3) 你需要在路由范围内关闭游标和连接，最好是游标然后连接（即在return语句之前）
4) 你的/showSelection 路由需要'GET' 方法。
5) 您不应该依赖 pandas 来格式化您的表格。这就是 Jinja2 的用途。
selection.html
% if variants %
<table>
<thead>
<tr>
<th>Gene</th>
<th>Literature</th>
<th>Variant</th>
<th>Description</th>
</tr>
</thead>
<tbody>
% for variant in variants %
<tr>
<td>variant.Gene</td>
<td>variant.Literature</td>
<td>variant.Variant</td>
<td>variant.Description</td>
</tr>
% endfor %
</table>
% else %
<p>There are no results</p>
% endif %
【讨论】：
谢谢亚当，将尝试并发布更新。【参考方案2】：我根据您的建议修改了我的代码，出于某种原因，来自客户端（自动完成事件）的选定值永远不会传递回服务器端。我做了一些谷歌搜索并将这两行添加到我的选择中：function(
select: function(event, ui)
$("#inputGene").val(ui.item.label);
var getID=ui.item.value;
return false;
它有效。我现在有一个有效的自动完成功能，可以将用户选择的值获取到 sql 并打印到 html 中的表格。
现在我想弄清楚如何从 select: fucntion 中显示警告消息（当用户选择的值不在数据库中时）。目前我可以在 app.py 中完成（通过返回 render_template 一个 erro.html。
最后，我需要使用 pandas 来格式化我的输出，然后再将它们发送到 Jinja 打印表格。否则，字典列表将无法与 Jinja 一起使用。我确信还有其他方法可以做到这一点，但我仍在学习。
感谢指点
【讨论】：
以上是关于烧瓶从自动完成传递选定的值并执行 SQL 查询以打印结果的主要内容，如果未能解决你的问题，请参考以下文章
从 material-ui 自动完成组合框中清除所有选定的值