JS单击事件中的Flask中的render_template [重复]
Posted
技术标签:
【中文标题】JS单击事件中的Flask中的render_template [重复]【英文标题】：render_template in Flask on JS click event [duplicate] 【发布时间】：2017-11-22 07:41:06 【问题描述】：我试图通过单击按钮来调用 Flask 中的函数。单击该按钮时，将运行以下脚本。
JS
$("#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 未呈现 - 页面保持不变。我猜这可能不是解决这个问题的最佳方法，但如果是这样，推荐的方法是什么？
【问题讨论】：
【参考方案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 的烧瓶路由，它会返回此信息。以上是关于JS单击事件中的Flask中的render_template [重复]的主要内容，如果未能解决你的问题，请参考以下文章
在 ext js 中的按钮单击事件上从网格和数据库中删除记录
如何使用 vue.js 中的单击事件从数据表中删除行而不干扰计算函数