当我们的用户进行系统登录时,用户名和密码的验证都是后端验证的。而且,用户登录状态也是要后端设置的,查询数据库后,用户名和密码正确,则在session中存储一个uuid,每个页面需要根据登录状态判断展示相应的内容时,则判断是否有uuid这个session,且uuid不为空。比如头部的登录按钮,在未登录状态是显示登录按钮,在登录后显示用户名和头像,这些都是判断是否有uuid这个值(具体实现里,相对来说更复杂一些)。

我们再来理下这个步骤:

  1. 向后端ajax发送用户名和密码

  2. 后端接收到用户名和密码后,查询数据库

  3. 若查询失败,则返回一个json数据,如:{"status":"-1", msg:"用户名或密码不正确"}

  4. 若查询成功,则在session中存储一个值,比如uuid,然后向前端返回一个json,比如:{"status":"0", msg:"success"}

  5. 前端js接收到返回的数据后,判断status的值,若status==0,则使用window.location.href进行跳转;其他的状态码都是登录失败,清空密码框,让用户重新输入

  6. 比如登录成功跳转到首页,首页里的php或java,需要判断session里是否有uuid

<nav>
<?php if(isset($_SESSION['uuid']) && !empty($_SESSION['uuid'])):; ?>
<!-- 若存在uuid,则不为空,则表示已经登录 -->
<a href="#">蚊子</a>
<?php else ?>
<!-- 没有登录 -->
<input type="button" value="登录" />
<?php endif; ?>
</nav>

Web前端初级问题—ajax登录跳转登录实现的更多相关文章

  1. C#-WebForm-Session、Cookie-登录验证(未登录跳至登录界面)、隐藏地址栏传值

    Post 传值(看不见的传值) Get 传值(看得见的传值) Session - 全局变量组 存放位置:服务端 作用:只要里面有内容,那么这个网站中所有的C#端都能访问到这个变量 -- object类 ...

  2. Session失效后所有Ajax请求跳转登录地址

    当登录的Session失效后,采用ajax请求数据时会没有反应,这时候应该自动跳转到登录页面,让用户重新登录. 全局配置以下可实现 $(function() { $.ajaxSetup({ compl ...

  3. Spring mvc interceptor配置拦截器,没有登录跳到登录页

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  4. [转]Spring mvc interceptor配置拦截器,没有登录跳到登录页

    <?xml  version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.s ...

  5. 淘宝前端工程师:国内WEB前端开发十日谈

    一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...

  6. Web前端开发十日谈

    =========================================================================== 原文章: http://kb.cnblogs.c ...

  7. 2019最新WEB前端开发小白必看的学习路线(附学习视频教程)

    2019最新WEB前端开发小白必看的学习路线(附学习视频教程).web前端自学之路:史上最全web学习路线,HTML5是万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次 ...

  8. 绝对精品推荐做前端的看下:Web前端开发体会十日谈

    20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...

  9. Web前端安全之安全编码原则

    随着Web和移动应用等的快速发展,越来越多的Web安全问题逐渐显示出来.一个网站或一个移动应用,如果没有做好相关的安全防范工作,不仅会造成用户信息.服务器或数据库信息的泄露,更可能会造成用户财产的损失 ...

随机推荐

  1. PyTorch深度学习实践——处理多维特征的输入

    处理多维特征的输入 课程来源:PyTorch深度学习实践--河北工业大学 <PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili 这一讲介绍输入为多维数据时的分类. 一个数据集 ...

  2. (第一章第一部分)TensorFlow框架介绍

    接下来会更新一系列博客,介绍TensorFlow的入门使用,尽可能详细. 本文概述: 说明TensorFlow的数据流图结构 1.数据流图介绍  TensorFlow是一个采用数据流图(data fl ...

  3. 基于Kubernetes/K8S构建Jenkins持续集成平台(上)-2

    基于Kubernetes/K8S构建Jenkins持续集成平台(上)-2 Kubernetes实现Master-Slave分布式构建方案 传统Jenkins的Master-Slave方案的缺陷 Mas ...

  4. JZ-068-打印从 1 到最大的 n 位数

    打印从 1 到最大的 n 位数 题目描述 输入数字 n,按顺序打印出从 1 到最大的 n 位十进制数.比如输入 3,则打印出 1.2.3 一直到最大的 3 位数即 999. 题目链接: 打印从 1 到 ...

  5. laravel resource风格

    resource 风格 概念 一种软件架构风格.设计风格,而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存 ...

  6. nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)

    问题场景 服务器重启后,重启nginx时报错nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: N ...

  7. call、apply 和 bind

    call().apply().bind() 都是用来重定义 this 这个对象的! var obj1 = { username: "HuiTaiLang", fn: functio ...

  8. PO模式在selenium自动化测试框架有什么好处

    PO模式是在UI自动化测试过程当中使用非常频繁的一种设计模式,使用这种模式后,可以有效的提升代码的复用能力,并且让自动化测试代码维护起来更加方便. PO模式的全称叫page object model( ...

  9. Kubernetes 使用kubeadm创建集群

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 实践环境 CentOS-7-x86_64-DVD-1810 Docker 19.03.9 Kubernetes version: v1.20.5 ...

  10. 先知xss挑战赛学习笔记

    xss游戏 游戏地址:http://ec2-13-58-146-2.us-east-2.compute.amazonaws.com/ LEMON参考wp地址 1. 文件上传 源码如下 <?php ...