首页>>表单>>jQuery+Ajax+PHP弹出层异步登录,包括返回状态(2017-05-12)

jQuery+Ajax+PHP弹出层异步登录,包括返回状态

返回的参数为json格式

jQuery+Ajax+PHP弹出层异步登录,包括返回状态
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.     <div class="row main">  
  3.         <div class="col-md-12">  
  4.             <div class="optlist">  
  5.                   
  6.                 <a href="#0" class="btn btn-danger btn-lg" id="form-btn" data-show-layer="hw-layer-login" role="button">点击弹出登录表单</a>  
  7.                   
  8.                 <div id="result"></div>  
  9.             </div>  
  10.               
  11.             <div class="hw-overlay" id="hw-layer-login">  
  12.                 <div class="hw-layer-wrap">  
  13.                     <button type="button" class="close hwLayer-close" aria-label="Close"><span aria-hidden="true">×</span></button>  
  14.                     <h3 class="hw-layer-title">用户登录</h3>  
  15.                     <div class="row">  
  16.                         <form class="form-horizontal" action="login.php" method="post" id="login-form">  
  17.                             <div class="form-group">  
  18.                                 <div class="input-group">  
  19.                                     <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>  
  20.                                     <input type="text" class="form-control" name="user" id="user" placeholder="请输入用户名">  
  21.                                 </div>  
  22.                             </div>  
  23.                             <div class="form-group">  
  24.                                 <div class="input-group">  
  25.                                     <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>  
  26.                                     <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">  
  27.                                 </div>  
  28.                             </div>  
  29.                             <div class="form-group">  
  30.                                 <div class="col-md-11 col-md-offset-1">  
  31.                                     <button type="submit" class="btn btn-success hwLayer-ok">登录</button>  
  32.                                     <span id="msg">本例测试一直是登录正确的状态</span>  
  33.                                 </div>  
  34.                             </div>  
  35.                         </form>  
  36.                     </div>  
  37.                 </div>  
  38.             </div>  
  39.               
  40.   
  41.         </div>  
  42.     </div>  
  43.   
  44. </div>  

 

JavaScript Code
  1. $(function(){  
  2.     $('#form-btn').hwLayer({  
  3.         width: 480,  
  4.         tapLayer: false,  
  5.         afterClose: function(){  
  6.             console.log('close');  
  7.         }  
  8.     });  
  9.     $(".hwLayer-ok").on('click',  function(event) {  
  10.         event.preventDefault();  
  11.         var user = $('#user').val();  
  12.         var pass = $('#password').val();  
  13.         if(user==''){  
  14.             $('#msg').addClass('text-danger').text('用户名不能为空！');  
  15.             return false;  
  16.         }  
  17.         if(pass==''){  
  18.             $('#msg').addClass('text-danger').text('密码不能为空！');  
  19.             return false;  
  20.         }  
  21.         $.ajax({  
  22.             url: 'login.php',  
  23.             type: 'POST',  
  24.             dataType: 'json',  
  25.             data: {username: user,password: pass},  
  26.             beforeSend: function(){  
  27.                 $('#msg').addClass('text-success').text('正在登录...');  
  28.                 $(".hwLayer-ok").attr('disabled',true);  
  29.             },  
  30.             success: function(res){  
  31.                 if(res.code==1){ //登录成功  
  32.                     $('#result').html('欢迎您，' + res.username + '，登录时间：' + res.logintime);  
  33.                     $('#msg').removeClass('text-danger').addClass('text-success').text('登录成功！');  
  34.                     $('#hw-layer-login').hwLayer('close');  
  35.                 }else{  
  36.                     $('#msg').addClass('text-danger').text('用户名或密码错误！');  
  37.                 }  
  38.                 $(".hwLayer-ok").removeAttr('disabled');  
  39.             }  
  40.         });  
  41.     });  
  42. });  

 


原文地址:http://www.freejs.net/article_biaodan_602.html