Python Flask Jinja2 网页在 location.reload(true) 时不完全刷新 HTML JavaScript

Question

我找了很久都没找到这样的答案。

这是我的网页，作为我的大学毕业项目。它是一个用Python Flask、Jinja2、HTML和JavaScript做的网络应用。这个应用可以创建活动，然后你可以实时查看世界各地Instagram上的照片。这是我的首页。

但是当我点击提交按钮时，我使用了event.preventDefault()，因为我想自己处理一些事情，最后我想用window.location.reload(true)来刷新页面，这样我就能看到新添加的活动，就像你在上面的图片中看到的那些。

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

这是我的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)应该重新获取所有数据。我不知道为什么只有Flask Jinja2部分的HTML没有被重新加载。

有没有什么想法、建议或者其他方法可以做到呢？

非常感谢！

javascript event handling web development HTML dynamic content flask jinja2 page refresh

Python Flask Jinja2 网页在 location.reload(true) 时不完全刷新 HTML JavaScript

1 个回答

撰写回答