[英]Data update without page reload jinja2
数据必须刷新而无需重新加载页面。 最初,数据使用jinja2出现在html上。
@app.route('/personal_account', methods=['POST'])
def welcome():
login = request.form['login']
data = get_default_user_data(login)
# ... processing
return render_sidebar_template("personal_account.html", data=data)
根据这些数据图是用chartist.js构建的。
personal_account.html
<div id="data">
<ul id="consumed_values">
{% set count = 0 %}
{% for i in data.consumed_values %}
<li>{{ data.consumed_values[count] }}</li>
{% set count = count + 1 %}
{% endfor %}
</ul>
</div>
<canvas width="800" height="600" id="canvas"></canvas>
<button id="button">Update</button>
我需要更新数据。 我正在使用ajax。 函数“ request”向服务器发出对Python中的get_selected_values函数的后请求。 此功能提供新数据。 但是新数据不会显示在页面的jinja2中。 数据仍旧。
personal_account.js
window.onload = draw();
function draw() {
var consumed_values = document.querySelectorAll('ul#consumed_values li');
var values = new Array();
for (var i = 0; i < consumed_values.length; i++) {
console.log(consumed_values[i].innerHTML);
values[i] = consumed_values[i].innerHTML;
}
var numbers = new Array();
for(var i=0; i<consumed_values.length; i++)
{
numbers[i]=i+1;
console.log(numbers[i]);
}
var ctx = document.getElementById('canvas').getContext('2d');
var grapf = {
labels : numbers,
datasets : [
{
strokeColor : "#6181B4",
data : values
}
]
}
new Chart(ctx).Line(grapf);
}
document.getElementById('button').onclick=function () {
request();
}
function reques() {
var first = selected[0];
var second = selected[1];
first.month = first.month+1;
second.month = second.month+1;
$.ajax({
type: 'POST',
url: '/get_selected_values',
success: function(response) {
alert('Ok');
draw();
},
error: function() {
alert('Error');
}
});
}
函数get_selected_values()
@app.route('/get_selected_values', methods=['POST'])
def get_selected_values():
# ...
data = fetch_selected_date(start_date=start_date, end_date=end_date, login=current_user.get_id())
if data:
# return jsonify({'result': True, 'data': data}) # does not work this way
# return jsonify({'result': False, 'data': []})
return render_sidebar_template("personal_account.html", data=data, result=1)
如何成功进行数据更新和图形重建?
编辑1
我正在使用get_selected_values函数的第一个版本。
请求函数如下所示:
...
success: function(response) {
alert('Успешно получен ответ:!'+ response.data);
document.getElementById('consumed_values').innerHTML = response.data;
draw();
},
...
数据更新成功,但是图形看起来相同。 怎么修?
好吧,这是我对此的看法。 您处在正确的轨道上,这里有一种方法可以更新元素,而无需在此实例中重新绘制页面。 发生的事情是,您正在从get_selected_values()
方法返回数据,但是一旦将其返回到AJAX请求中,就不会对其进行任何处理。
因此,首先,我要提请您注意您的AJAX请求:
$.ajax({
type: 'POST',
url: '/get_selected_values',
success: function(response) {
alert('Ok');
draw();
},
error: function() {
alert('Error');
}
});
当您从中获得成功的响应时,您会在UI中看到“确定”警报,对吗? 但是,即使您调用draw()
方法,UI中也没有任何更新?
在这种情况下,您将不想从Flask函数返回render_template
。 您已经从函数返回JSON的正确轨道上了:
if data:
# return jsonify({'result': True, 'data': data}) # does not work this way
当您返回JSON数据时,它将存储在success
函数的response
变量中。 如果您不确定该response
变量到底是什么,请在您的AJAX请求的success
函数中使用alert(JSON.stringify(response))
类的内容输出其内容。 从这里您将看到您的数据返回到您的方法。
现在,您需要确定如何使用这些数据来更新UI中的<div id="data">
元素。 您可以使用JavaScript和一系列document.getElementById('element_id').innerHTML
语句或类似的语句来执行此操作,以便用响应中的所有更新数据填充您的元素。
这将自动更新您希望显示的数据,而无需刷新页面。
现在您已经完成了,再次调用draw()
函数,它现在应该使用更新的数据。
希望这有助于您踏上正确的道路!
编辑后1
最初填充<div id="data">
您正在使用循环用数据填充元素中的一系列<li>
标记。
使用新数据更新此元素时,仅使用.innerHTML
重新填充父<ul>
元素。
您的draw()
方法正在寻找存储在<li>
元素中的数据。
您是否绝对确定在执行更新后,您的<div id="data">
元素具有与draw()
方法完全相同的格式(即预期格式draw()
? 因为它仍然在结构中:
<div id="data">
<ul id="consumed_values">
<li>Your updated data here...</li>
<li>More updated data...</li>
</ul>
</div>
这是您的draw()
方法期望找到的元素结构。 它从列表中的每个<li>
元素中提取数据。 因此,这些是需要存储更新值的元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.