前后端学习_Javascript_Flask_页面跳转的问题

背景介绍

网页开发时常常使用到页面跳转
最近在做项目时
有以下两个地方需要用到跳转

• 退出登录时跳转回登陆界面，后端清除SESSION
• 主菜单点击按钮跳转到指定页面

计划都使用重定向的方法

---

后端实现

普通渲染：浏览器URL的地址栏不变

return render_template("login.html")

重定向：浏览器URL的地址栏改变；

app.route('/login')
# 视图函数
def returnloginpage():
    return render_template("login.html")

return redirect(url_for('returnloginpage'))

前端实现

刚开始使用的是POST方式进行退出登录

<a id='exit' onclick="exit()">退出登录</a>

function exit() {
  jQuery.post('/exit', "")
}

点击a标签后，后台显示账户登出，SESSION清空
通过F12的调试工具发现后端已经返回了登录页面的html，但前端并没有跳转。

---

后改用a标签的href参数
配合Flask的{{url_for(‘视图函数名称’)}}
成功进行跳转

---

但button标签没有href参数
只能使用onclick配合下面语句

window.location.href = '/exit'

最终解决

以上几种方案感觉都不是特别简洁，于是随便找了个网站看看别人是怎么做的，发现其使用a标签+href参数就实现了跳转的功能。

只需要这样写就行了

<a href="/exit">退出登录</a>

然后通过样式表改变a标签样式，让其像一个按钮即可

感想

有时候问题不要想太复杂，扎扎实实学好基础才是王道。遇到不懂的问题多去看看别人是怎么做的。