如何让 python 使用 Flask 和 JINJA2 从动态表中检索用户输入的数据
Posted
技术标签:
【中文标题】如何让 python 使用 Flask 和 JINJA2 从动态表中检索用户输入的数据【英文标题】:How to get python to retrieve user-inputted data from a dynamic table using Flask & JINJA2 【发布时间】:2018-12-30 07:37:41 【问题描述】:我正在构建一个 Flask 应用程序,其中包含一个表格,用户可以在其中更改单元格并“应用”这些更改,例如在数据库中更新。
图片如下
我在让烧瓶检索已通过表单提交的数据时遇到问题。
行数是动态的,取决于列表中 Id 的数量。
这是我的 html -- 很抱歉,我还在学习。
<tbody>
<form method="post" name="productCost">
% for n in range(name_list | length) %
<tr>
<th scope="row" >name_list[n]</th>
<td>ID_list[n]</td>
<td id="costn">$cost_list[n]</td>
<td>---</td>
<td id="changesn"><button onclick="costChangesn()">Edit</button></td>
</tr>
<script>
function costChangesn()
document.getElementById("costn").innerHTML = "<input placeholder='cost_list[n]' name=ID_list[n]>";
document.getElementById("changesn").innerHTML = "<button onclick='applyChangesn()' type='submit'>Apply</button><button onclick='cancelChangesn()'>Cancel</button>";
function applyChangesn()
docuemnt.getElementById("costn").innerHTML = document.forms["productCost"]["ID_list[n]"]
function cancelChangesn()
document.getElementById("costn").innerHTML = "cost_list[n]";
document.getElementById("changesn").innerHTML = "<button onclick='costChangesn()'>Edit</button>";
</script>
%endfor%
</form>
</tbody>
这是我的 python/flask 代码:
app.route('/expenses', methods=['GET', 'POST'])
def expenses():
if 'email' not in session:
return redirect(url_for('login_now'))
list_of_product_dicts = get_name_id()
name_list = []
asin_list =[]
cost_list=[]
for p in list_of_product_dicts:
name_list.append(p['name'])
id_list.append(p['id'])
cost = get_landing_cost(p['id'])
cost_list.append(cost)
if request.method == 'POST':
print(request.form['name'])
return flask.render_template('expenses.html', name_list = name_list, id_list=id_list,
cost_list=cost_list)
我需要 python 来识别所做的更改并将其存储在变量中。这是为了在数据库中更新它——但我不需要数据库代码的帮助。我只需要帮助让 python 抓取已更改的单元格并识别它所在的行。
【问题讨论】:
【参考方案1】:将jquery
与ajax
一起使用会更简单一些。后者使您能够通过与后端脚本通信来更新数据库来动态更新表。
首先,创建 HTML 脚本(下面的代码为本示例创建了不同的表格布局,但是,您可以根据下面的代码替换您自己的)。 jquery 干净利落地处理 Apply、Cancel 和 Edit 按钮功能,并通过ajax
与后端通信:
tables.html
:
<html>
<body>
<table>
<tr>
<th>ID</th>
<th>Cost</th>
<th>Effective Date</th>
<th>Make Changes</th>
</tr>
%for row in data%
<tr>
<td>row.id</td>
<td class='costrow.rowid'>row.price</td>
<td>row.date</td>
<td>
<div id='optionsrow.rowid'>
<button id='mutaterow.rowid'>Edit</button>
</div>
<td>
</tr>
%endfor%
</table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function()
$("div[id^='options']").on('click', 'button', function()
var the_id = this.id.match('\\d+');
var the_type = this.id.match('[a-zA-Z]+');
if (the_type == "mutate")
$('#options'+the_id).html('<button id="cancel'+the_id+'">Cancel</button>\n<button id="apply'+the_id+'">Apply</button>');
var current_cost = $('.cost'+the_id).text();
$('.cost'+the_id).html('\n<input type="text" class="newval'+the_id+'" value="'+current_cost+'">')
else if (the_type == 'cancel')
$('#options'+the_id).html('<button id="mutate'+the_id+'">Edit</button>');
else
var value = $(".newval"+the_id).val();
$.ajax(
url: "/update_cell",
type: "get",
data: newval: value, rowid:the_id,
success: function(response)
$('.cost'+the_id).html(value);
$('#options'+the_id).html('<button id="mutate'+the_id+'">Edit</button>');
,
error: function(xhr)
//Do Something to handle error
);
);
);
</script>
</html>
然后,创建应用和路由:
import flask, sqlite3, collections
app = flask.Flask(__name__)
@app.route('/', methods=['GET'])
def home():
dummy_data = [['hvVlNnAW', '$6.00', '--'], ['UqBzqLho', '$10.00', '--'], ['tuEdqldI', '$3.00', '--'], ['MIHLFWDS', '$1.00', '--'], ['rUnjpHiJ', '$8.00', '--'], ['lHVHxgZF', '$1.00', '--'], ['nFfaHkHj', '$3.00', '--'], ['rRWqXqVh', '$8.00', '--'], ['rdzCRozr', '$4.00', '--'], ['MGojGbtW', '$9.00', '--']]
#substitute dummy_data with a database query
product = collections.namedtuple('product', ['id', 'price', 'date', 'rowid'])
return flask.render_template('tables.html', data = [product(*a, i) for i, a in enumerate(dummy_data, 1)])
@app.route('/update_cell')
def update_row():
new_val = flask.request.args.get('newval')
prod_id = int(flask.request.args.get('rowid[]'))
#commit new_val to database
return flask.jsonify('success':True)
现在,在'/update_cell'
中,您有了新的价格值和产品行 ID,它告诉您要更新哪个 sqlite 行的价格。请注意,在home
中,由enumerate
获取的行ID 对应用程序至关重要,因为它使jquery
能够知道要更新哪些表和sqlite 行。
演示:
【讨论】:
以上是关于如何让 python 使用 Flask 和 JINJA2 从动态表中检索用户输入的数据的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Flask 和 HTML 从 python 列表创建下拉菜单
如何使用flask将javascript数组传递给python脚本[使用flask示例]