无需页面重新加载的数据更新 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构建的。

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。 函数“请求”向服务器发出对 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();
        },
...

数据已成功更新，但图表看起来相同。如何解决？

Answer 1

好的，这是我对此的看法。您在正确的轨道上，是一种更新元素的方法，而无需在这种情况下重新绘制页面。发生的情况是，您正在从您的 get_selected_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_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"> 元素。您可以只使用带有一系列 document.getElementById('element_id').innerHTML 语句或类似语句的 JavaScript 来执行此操作，以便使用响应中的所有更新数据填充您的元素。

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

现在您已经完成了，再次调用您的 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> 元素中提取数据。所以这些是需要存储更新值的元素。