Python Flask Jinja2 网页未在 location.reload(true) HTML Javascript 上完全刷新

Question

我一直在寻找那个答案，但我没有找到这样的答案。

这是我的网页，用于我的最后一个大学项目。这是一个 Python Flask Jinja2 Html Javascript Web 应用程序。 它创建事件，然后您可以在世界各地的 Instagram 上实时查看照片。 这是index

但是当我单击提交按钮时，我会创建一个event.preventDefault()，因为我想自己进行操作，最后我想要一个 window.location.reload(true)，这样我就可以看到添加的新事件，如您所见图片中的第一个。

但是window.location.reload(true) 的结果是这样的，只有一半的页面被刷新。 here

这是 Javascript 代码：

$(document).ready(function () {
    $('#formEvent').submit(function (event) {
        event.preventDefault();
        createEvent();
    });
});
function createEvent() {
    var name = $("#inputEventName").val().replaceAll(" ", "%20");
    var lat = parseFloat($("#inputLat").val());
    var lng = parseFloat($("#inputLong").val());
    var rad = parseInt($("#inputRad").val());
    var desc = $("#inputEventDesc").val().replaceAll(" ", "%20");
    var init = $("#dp1").val().replaceAll("/", "-");
    var end = $("#dp2").val().replaceAll("/", "-");
    var url = "http://insideone.ngrok.com/createEvent/" + name + "/" + lat + "/" + lng + "/" + rad + "/" + init + "/" + end + "/" + desc;
    $.get(url,
        function (result) {
            if (result == "OK") cleanFormAndHide();
            else alert("Some error happened");
    });
    return true;
}
function cleanFormAndHide(){ //you can see that I tried differents ways
    window.location.reload(true);
    //$('#formEvent').unbind('submit').submit();
    //window.location.replace("");
}

以及索引页的模板：

//we first have the map and more html pure code

<div id="map-canvas" style="height: 450px; width: 100%" class="col-lg-12"></div>

//...
//and then the html jinja2 flask code

<div class="row mt centered">
    {% for item in events %}
    {% if item.isActive %}
        <div class="col-lg-4" style="text-align: center">
            <a class="zoom" target="_blank" href="event/{{item.id}}">
                <img style="vertical-align: middle; display: inline-block" class="img-responsive" src="{{ item.latestpic }}"/>
            </a>
            <p>{{item.name}}</p>
        </div>
    {% endif %}
    {% endfor %}
</div>

还有索引处的 Python：

@app.route('/', methods=['GET'])
def index():
    v_res = c.query('geoEvents', 'events', descending=True)
    content = []
    link = ""
    for res in v_res:
        pic = c.query(res[1][4], res[1][5], descending=True, limit=4)
        for p in pic:
            if isActiveUrl(p[1][0]):
                link = p[1][3]
                break
            else:
                deactivateUrl(p)
    if pic.rows_returned > 0:
        content.append({'name': res[1][0], 'description': res[1][4], 'isActive': res[1][2], 'isFinished': res[1][3],
                        'designDocument': res[1][4], 'viewName': res[1][5], 'latestpic': link, 'id': res[2]})
    return render_template('index.html', events=content)

这就是为什么我认为 location.reload(true) 应该再次获取所有数据。我不知道为什么只是 html 的烧瓶 jinja2 部分没有重新加载。

有什么想法或建议或其他方式吗？

非常感谢！

Answer 1

没有足够的评论点，所以这是一个硬币翻转答案：p你试过了吗：

window.location.href=window.location.href

（看到这里：Difference between window.location.href=window.location.href and window.location.reload()）？

此外，您是否检查过烧瓶控制台和/或开发工具控制台 (F12) 中记录的可能错误？

编辑：我可能找到了解决您问题的方法：事实上，您不需要使用 window.reload 或 .location，因为您正在向页面发出 ajax get 请求在提交按钮上单击（如果我做得好的话）会重新加载一个元素。

仍然，您没有看到任何更新，因为您没有在成功函数中指出将数据响应放在 html 中的位置，禁用 jinja2 循环它（据我在测试类似代码时得到的） ) 所以尝试通过以下方式更改您的 jquery 获取请求：

$.get('/url_where_to_get_data').done( 
    function(data){ 
        $('.row mt centered').html(data);
)};

此时无需调用页面重新加载，您通常可以使用 jinja 循环访问数据。此外，为了加快速度并避免模板重复，我建议您创建一个专用视图，从中获取“刷新”数据，例如：

@app.route('/refresh')
def refresh():
# Db query and data formatting
return json.dumps(data) 

让我知道它是否有效;)