无需重新加载页面即可更新数据的jinja2

Question

数据需要在不刷新页面的情况下进行更新。原始数据使用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构建图表。

个人账户.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发出post请求以从服务器获取新数据。 这个函数提供了新数据。但是新数据在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');
        }
    });
}

获取所选值的函数

@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();
        },
...

数据已成功更新，但图表看起来仍然一样。如何解决？

- user9317875

Answer 1

好的，这是我的看法。在这方面你走对了路，有一种方法可以更新元素，而不需要重新绘制页面。发生的情况是，在从get_selected_values()方法返回数据后，您没有对其进行任何处理。

首先，我将引起您对AJAX请求的注意：

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

当您从中获得成功响应时，您在UI中看到了“OK”警报，对吗？但是尽管您调用了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()方法所需的完全相同（即预期）吗？它的结构是否仍然是这样的：

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

这是您的draw()方法期望找到的元素结构。它从列表中的每个单独的<li>元素中获取数据。因此，这些元素需要存储您更新后的值。

- AJC24

---

谢谢您的回复！请查看编辑1。 - user9317875

好的，我根据EDIT 1为您更新了更多信息。 - AJC24

点赞，非常有帮助。然而今天，可能最好使用fetch函数和then()链接。 - user21398