Question

我正在尝试在没有刷新页面的情况下尽快将新数据加载到json2模板中但是我无法做到这一点，这是我现在尝试的主要功能

@app.route("/")
def index1():
return render_template("index.html",gamest=get_games())

返回信息的服务器上的端点。

@app.route("/sys_info.json")
def index():
     return get_games()

jinja 2剧本：

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="content">{{ index }}</div> {# this is the original system_info passed in from the root view #}

<script>
setInterval(function(){ // load the data from your endpoint into the div
    $("#content").load("/sys_info.json")
},1000)
</script>

<div class="list-group">
            {% for  game in gamest %}
            <a class="score-size text-xs-center nounderline list-group-item list-group-item-action" >
               <div class="row">
                  <div class="col-xs-4">
                     {% if game["Batting_team_img"] %}
                     <img class="team-logo" src="/static/{{ game["Batting_team_img"] }}">
                     {% endif %}
                     {{ game["Batting team"] }}  {{ game["runs10"] }}
                     </b>
                     <br>
                     {{ game["wickets10"] }}
                  </div>

我只能看到终端中的值发生变化，但我看不到网页数据的任何变化仍然是静态的，我该如何解决这个问题，以便在网站中动态更改数据而不刷新页面？

Answer 1

请求数据，但js脚本不刷新html。您必须为浏览器添加逻辑以加载html中的数据。例如：

setInterval(function() {
    // load the data from your endpoint into the div
    $.getJSON("/sys_info.json", function (data) {
       $.each(data, function (_, element) {
         $('.list-group').append('<div>' + elment['Batting team'] + '</div>);
       });
    })
},1000)

您需要客户端浏览器执行与使用jijna的服务器相同的操作。

如何在没有刷新页面的情况下在Flask中自动重新加载jinja 2数据？

1 个答案: