JS单击事件中的Flask中的render_template [重复]答案

【问题标题】：render_template in Flask on JS click event [duplicate]JS单击事件中的Flask中的render_template [重复]
【发布时间】：2017-11-22 07:41:06
【问题描述】：

我试图通过单击按钮来调用 Flask 中的函数。单击该按钮时，将运行以下脚本。

$("#load_btn").click(function() {
    $.get("/callback");
}

烧瓶

@app.route('/callback')
def callback():
    print('called')
    ... # code here that needs to run before rendering callback
    return render_template('callback.html')

这里的问题是，called 已打印，GET /callback HTTP/1.1 200 也已记录，但 callback.html 未呈现 - 页面保持不变。我猜这可能不是解决这个问题的最佳方法，但如果是这样，推荐的方法是什么？

【问题讨论】：

标签： javascript jquery python ajax flask

【解决方案1】：

$.get 只是向您的服务器发送一个 HTTP 请求，但实际上并没有对从服务器返回的数据（在您的情况下为渲染的模板）做任何事情。

试试这样的：

$("#load_btn").click(function() {
    $("html").load("/callback");
}

或者如果你渲染的模板不包含任何<head>标签，只有body内容，你可以这样做

$("#load_btn").click(function() {
    $("body").load("/callback");
}

或者，您可以将“body”替换为特定元素，以仅替换页面的特定部分。

如果您希望用户被重定向，请执行以下操作：

$("#load_btn").click(function() {
    window.location = "/callback";
}

【讨论】：

这会替换当前页面中的内容。如果有意义的话，我希望用户被重定向到 mysite.com/callback 并为该页面呈现callback.html。我通过烧瓶应用程序将其发回而不是直接在 HTML 中加载它的原因是因为我需要在回调中运行一个函数。
我已经更新了答案
谢谢，这改变了网址，但它仍然不能解决我的问题。我正在寻找在 callback 方法中的代码执行后发生的重定向（我在我的原始帖子中用 ... 表示。）。
是的，就是这样。当用户单击#load_btn 元素时，会调用单击处理程序，这会更改 url。浏览器从服务器获取此 url 的内容。然后，您的 callback 函数中的任何代码都会运行。然后，渲染模板，并将响应发送到浏览器
HTTP 是一个非常简单的基于请求和响应的协议。所以当用户去/callback时，你的回调函数只能发送一个响应。有几种方法可以做到这一点，但最简单的方法是让callback 函数在后台线程中运行长时间运行的任务，然后立即返回包含进度条的响应模板。然后该页面需要向服务器发送请求（使用$.get）以请求进度。您将创建一个类似 /callback_progress 的烧瓶路由，它会返回此信息。