ajax登录带来良好的用户体验,下面是个简单的案例,给大家看看:
html代码:
<form role="form">
<div class="form-group">
<h4 style="color:#428bca;"><i class="icon-coffee green"></i>专业网站管理系统</h4>
</div>
<div class="form-group">
<label>用户名</label>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" name="password" id="password" class="form-control">
</div>
<div class="form-group">
<input type="text" style="width:120px; height:40px; float:left;"placeholder="验证码"
name="yzm" maxlength="4" class="form-control" id="yzm">
<img style="cursor:pointer; height:40px; width:200px;" src="__APP__/Home/Login/yzm/
Verify()" alt="点击更换" onclick="this.src='__APP__/Home/Login/yzm/Verify()'+Math.random()" />
</div>
<div class="form-group sub">
<button style="margin-top:20px;" class="btn btn btn-primary pull-right" type="button" id="btn">
登 录
</button>
</div>
</form>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
var username=$("#username").val();
var password=$("#password").val();
var yzm=$("#yzm").val();
if(username==""){
$("<a id='msg'>").html('账号不能为空!').appendTo(".sub").fadeOut(4000);
$("#username").focus();
return false;
}
if(password==""){
$("<a id='msg'>").html('密码不能为空!').appendTo(".sub").fadeOut(4000);
$("#password").focus();
return false;
}
if(yzm==""){
$("<a id='msg'>").html('验证码不能为空!').appendTo(".sub").fadeOut(4000);
return false;
}
// ajax登录
$.ajax({
url:"{:U('Login/login')}",
type:'post',
data:{"username":$("#username").val(),"password":$("#password").val(),"yzm":$("#yzm").val()},
timeout:5000,
datatype:'text',
success:function(msg){
if(msg=="yes"){
alert('登录成功!');
location.href="{:U('Home/Index/index')}";
}
else if(msg=="zm"){
$("<a id='msg'>").html("账号或密码错误!").appendTo(".sub").fadeOut(4000);
// return false;
}
else if(msg=="yz"){
$("<a id='msg'>").html("验证码错误").appendTo(".sub").fadeOut(4000);
$("#yzm").focus();
}
else{
alert('登录失败!');
}
},
});
})
})
</script>控制器代码:
public function login(){
$username=$_POST['username'];
$yzm=$_POST['yzm'];
$password=md5(md5($_POST['password']));
$rst=$this->check_verify(I('post.yzm'));
if($rst===false){
echo "yz";exit;
}
$re=M('user')->where(array('username'=>I('username')))->find();
if($username!=$re['username']||$password!=$re['password']){
echo "zm";exit;
}else{
$_SESSION['adminCount']=$re;
echo "yes";exit;
}
}