JQuery实现表单监听,登录数据提交,返回token储存,跳转登录成功页面

JQuery实现表单监听,登录数据提交,返回token储存,跳转登录成功页面
分为四步:第一步 阻止默认提交行为;第二步 获取表单数据;第三步 发起ajax请求;第四步 存储token并跳转页面
示例代码中的layer使用的layui中的方法,快速获取表单数据是jQuery中的serialize方法,存储返回的token使用了浏览器对象的localStorage,跳转使用了浏览器的location对象。


QQ截图20230403103659.png

('#form_login').submit(function (e) { // 阻止默认提交行为 e.preventDefault().ajax({
method: 'POST',
url: '/api/login',
// 快速获取表单中的数据
data: $(this).serialize(),
success: function (res) {
if (res.status !== 0) {
return layer.msg('登录失败!')
}
layer.msg('登录成功!')
// 将登录成功得到的 token 字符串,保存到 localStorage 中
localStorage.setItem('token', res.token)
// 跳转到后台主页
location.href = '/index.html'
}
})
})


localstorage 在浏览器的 API 有两个:localStorage 和sessionStorage,存在于 window 对象中:localStorage 对应 window.localStorage,sessionStorage 对应 window.sessionStorage。
local storage以键值对的形式存储,数据类型是string,如果返回其他类型会自动转为string,主要的方法有


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容