使用 render_template 重新渲染不起作用答案

【问题标题】：Re-rendering with render_template not working使用 render_template 重新渲染不起作用
【发布时间】：2020-03-29 17:58:04
【问题描述】：

Flask 没有使用新变量重新渲染模板页面。

Flask 代码 (app.py)：

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)


@app.route("/",methods = ['GET', 'POST'])
@app.route("/<value>",methods = ['GET', 'POST'])
def index(value=1):
    print(value)
    return render_template('home.html',number=value)

@app.route("/next",methods = ['GET', 'POST'])
def next():
    if request.method == 'POST':
        last_num = list(dict(request.form).keys())[0]
        last_num = int(last_num)
        return redirect(url_for("index",value=last_num+1))

if __name__ == '__main__':
    app.run()

HTML 页面 (home.html)：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
    $('#submit').click(function() {
        $.ajax({
            url: '/next',
            data: String(Number(document.getElementById("number").textContent)),
            type: 'POST',
            success: function(response) {
                console.log("Awesome");
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});
</script>
</head>
<body>

<div id="number">
  {{number}}
</div>
<button type="button" id="submit">Next</button>

</body>
</html>

HTML 页面中的（最后一个）数字很好地到达了烧瓶代码，index 函数也获得了递增的值。但是 HTML 页面不会使用新的 number 变量重新加载。

【问题讨论】：

(1) 为什么你在 HTML 中禁用了 onClick 而在 JS 中却应用了相同的功能？ (2) 从 Ajax 调用重定向到页面并不简单（因为浏览器不期望它）。看看这个答案：stackoverflow.com/questions/199099/…
@RahulBharadwaj 有没有更简洁的方式从 HTML 到 Flask（而不是 ajax）进行通信并使用数据从 Flask 重新呈现 HTML 页面？

标签： javascript python jquery html flask

【解决方案1】：

几件事。

首先，您可以将烧瓶变量直接插入到您的 JavaScript。它可能会导致您的编辑器出错（不是在这种情况下），但是当页面呈现时，它会起作用适当地。（即data: "{{ number|safe }}"）

其次，您没有重定向客户端。您正在从 API 调用返回重定向，但您没有关注它。仅当您将 /next 端点呈现为您的页面时，该功能才有效。您应该返回您希望客户端导航到的 URL。您可以在 JavaScript 中通过多种方式设置页面 URL。如果您只想重新加载页面，请将location.reload(true) 放入您的成功处理程序中。（通过将 forceGet 设置为 true，您将阻止浏览器从缓存中重新加载，因此服务器将实际更新页面上的变量）。请注意，如果您这样做，您将需要将变量全局存储在您的后端，否则它不会更新。这可能是您现在的问题（如果您每次都手动重新加载页面）：您的变量仅通过重定向传递，您没有关注和呈现。

最后，我想说有更好的方法来完成你想做的事情。也许将变量存储在本地并远程更新到数据库中。无需为这种微不足道的事情重新加载页面。

希望这会有所帮助。如果我误解了您的问题或我犯了错误，请告诉我。

【讨论】：