当实现用户的账户和密码输入正确之后, 页面跳转 跳转 使用 Windows.loacation.href ="网址",
这个时候 那个登录的地方有个 账号和密码 这个是怎么做到的呢?
现在有个方法是:
在输入账号和密码的时候 , 当账号和密码都正确的时候, 把这个两个值都存在本地, 然后转到登录进去的页面的时候,
再在本地的缓存里面取到这 2 个值, 即可.
- <!DOCTYPE html>
- <HTML>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style>
- *{
- margin:0;
- padding:0;
- }
- #top{
- width:100%;
- height:40px;
- background-color:black;
- text-align:right;
- font-size:14px;
- }
- #top a{
- color:white;
- text-decoration:none;
- line-height:40px;
- vertical-align:middle;
- margin-right:40px;
- }
- #login{
- display:none;
- margin-left:40px;
- }
- #login a{
- display:block;
- width:300px;
- height:40px;
- background-color:firebrick;
- line-height:40px;
- vertical-align: middle;
- color:white;
- text-decoration:none;
- text-align:center;
- }
- input{
- width:300px;
- height:40px;
- font-size:14px;
- }
- #login .name,.password,.bu{
- margin-lfet:20px;
- margin-top:15px;
- }
- a{
- cursor:pointer;
- }
- </style>
- <script src="jquery-1.10.2.min.js"></script>
- <script src="layer/layer.js"></script>
- <script>
- function showLogin(){
- layer.open({
- type:1,//type 为 1 表示弹出的是 div
- title:'登陆',
- area:['395px','300px'],
- content:$('#login')
- });
- }
- function login(){
- var userName= $.trim($(".userName").val());//trim 用于去掉空格
- var password= $.trim($(".password").val());
- if(userName==""||password==" "){
- layer.alert("用户名或密码不能为空",{
- title:'提示',
- icon:5
- });
- }else{
- // 输入用户名和密码不为空
- //Ajax, 第一个是传到的后台页面, 第二个参数是用户名密码, 第三个参数是从后台获取的数据
- $.post("/ 后台页面",{"userName":userName,"password":password},function(data){
- // 这个地方使用的是 layer 的弹出框 ,
不使用就可以直接跳转到相应的页面 在此之前, 可以把 2 个值存到本地 即用户名和密码
- Windows.location.href = "网址"
- if(data=="登陆成功"){
- layer.alert("登陆成功",{
- title:'提示',
- icon:6
- });
- }else{
这个地方可以用到在输入框下面把用户名或者密码错误显示出来
当然这个地方可以用到正则, 提示输入的密码符合怎么规则, 账号是什么规则等等 .
- layer.alert("用户名或密码出错",{
- title:'提示',
- icon:5
- });
- }
- });
- }
- }
- </script>
- </head>
- <body>
- <div id="top">
- <a id="reg"> 注册 </a>
- <a id="log" onclick="showLogin()"> 登陆 </a>
- </div>
- <!--sql 注入, 利用 SQL 语句的漏洞来攻击数据库 -->
- <div id="login">
- <div class="name">
- <input type="text" class="userName" placeholder="请输入用户名">
- </div>
- <div class="password">
- <input type="password" class="password" placeholder="请输入密码">
- </div>
- <div class="bu"><a onclick="login()"> 登陆 </a></div>
- </div>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3036130.html