当实现用户的账户和密码输入正确之后,页面跳转 跳转 使用window.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个值存到本地 即用户名和密码
window.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" οnclick="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 οnclick="login()">登陆</a></div>
</div>
</body>
</html>