Javascript 不重新加载页面的数据更新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)

根据这些数据，graph正在使用chartist.js构建

个人账户.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>

如何成功地进行数据更新和图形重建

编辑1

我正在使用get_selected_values函数的第一个版本

请求函数如下所示：

...
 success: function(response) {
            alert('Успешно получен ответ:!'+ response.data);
            document.getElementById('consumed_values').innerHTML = response.data;
            draw();
        },
...

---

数据更新成功，但图形看起来相同。如何修复？

好的，这是我的看法。您所处的轨道是正确的，有一种方法可以更新元素，而无需在此实例中重新绘制页面。发生的情况是，您正在从

get\u selected\u values（）

方法返回数据，但一旦返回到AJAX请求，就不会对其执行任何操作

首先，我要提请您注意您的AJAX请求：

$.ajax({
  type: 'POST',
  url: '/get_selected_values',
  success: function(response) {
    alert('Ok');
    draw();
  },
  error: function() {
    alert('Error');
  }
});

当您从中获得成功响应时，您会在UI中看到“OK”警报，对吗？但是，尽管您调用了

draw（）

方法，但UI中没有任何内容更新

在这种情况下，您不希望从Flask函数返回

render_模板

。通过函数返回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中的

元素。您可以使用JavaScript和一系列

document.getElementById（'element_id'）.innerHTML

语句或类似语句来实现这一点，这样您的元素就会被来自响应的所有更新数据填充

这将自动更新您希望显示的数据，而无需刷新页面

现在您已经完成了，再次调用

draw（）

函数，它现在应该使用更新的数据

我希望这能帮助你走上正确的道路

编辑1后

最初填充

时，使用循环将数据填充元素中的一系列

标记

使用新数据更新此元素时，只需使用

.innerHTML

重新填充父元素

您的

draw（）

方法正在查找存储在

元素中的数据

您是否绝对确定，在执行更新后，

元素的格式与

draw（）

方法的格式完全相同（即预期格式）？因为它仍然在结构中：

<div id="data">
  <ul id="consumed_values">
    <li>Your updated data here...</li>
    <li>More updated data...</li>
  </ul>
</div>

您的更新数据在此
更多更新的数据

---

这是

draw（）

方法希望找到的元素结构。它从列表中的每个

元素中提取数据。因此，这些是需要存储更新值的元素。

感谢您的回复！请参见编辑1确定我已根据编辑1为您更新了更多信息。

if data:
  # return jsonify({'result': True, 'data': data}) # does not work this way

<div id="data">
  <ul id="consumed_values">
    <li>Your updated data here...</li>
    <li>More updated data...</li>
  </ul>
</div>