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; } }