不刷新页面的登录框(基于Thinkphp)

​1、Htlm(loginPopUp.html):

<link type="text/css" rel="stylesheet" href="__PUBLIC__/Css/H/loginPopUp.css"/>

<script src="__PUBLIC__/Js/H/loginPopUp.js" type="text/javascript"></script>

<section hidden>

<div id='rvType'></div>

<div id='rvId'></div>

<div id='rvTo'></div>

<div id='rvPlid'></div>

<div id='rvCon'></div>

<div></div>

<div>

<div><a onClick="closeBox()">×</a></div>

<p>用户登录</p>

<div>

<div>

<div>

<i></i><span id="msg-error-text"></span>

</div>

</div>

<div class="item item-name">

<input type="text" id="loginName" name="name"  placeholder="手机号"/>

</div>

<div class="item item-password">

<input type="password" id="loginPass" name="password" placeholder="密码" />

</div>

<div>

<input type="submit" class="btn-img btn-entry" id="loginsubmit"

onClick="return subLogin(this);" value="立即登录" />

<input type="reset" style="display:none;" />

</div>

</div>

</div>

</section>

2、CSS(loginPopUp.css):

.login-form{

position:fixed;

width:306px;

height:260px;

margin:auto;top:0;left:0;right:0;bottom:0;

background:#FFF;

z-index:900001;

padding: 20px 50px;

}

.login-form .login-form-title{

text-align:center;

letter-spacing: 0.5em;

font-size:1.2em;

}

.login-form .msg-wrap{

min-height: 31px;

    height: auto;

    margin: 5px 0;

    visibility: hidden;

    color:#ef4744;

}

.login-form .item{

overflow:hidden;

height:38px;

position:relative;

border: 1px solid #ddd;

margin-bottom:20px;

}

.login-form .item .iconfont{

display:block;

width:20px;

height:20px;

position:absolute;

left:10px;

top:9px;

}

.login-form .item .text{

line-height: 18px;

    height: 38px;

    border: 0;

    padding: 10px 0 10px 10px;

    width: 294px;

    float: none;

    overflow: hidden;

    font-size: 14px;

}

.login-form .login-btn{

margin-bottom:20px;

overflow:hidden;

}

.login-form .login-btn .btn-img{

width: 300px;

    height: 35px;

    font-size: 14px;

    color: #FFF;

    background: #78C4EC;

    text-align: center;

    line-height: 35px;

    text-decoration: none;

    cursor: pointer;

    letter-spacing: 2px;

    border: none;

    -moz-box-shadow: 1px 1px 2px #78c4ec; /* Firefox */

    -webkit-box-shadow: 1px 1px 2px #78c4ec; /* Safari 和 Chrome */

    box-shadow: 1px 1px 2px #78c4ec;

}

.login-form-top{

text-align:right;

margin-top:-20px;

}

.login-form-top a{

padding:0px 6px;

text-align:center;

margin-right:-50px;

font-size:22px;

font-weight:600;

color:#666;

}

.login-form-top a:hover{

background:#78c4ec;

}

3、jquery(loginPopUp.js):

function subLogin(_obj){

var parent=$(_obj).parent().parent();

var name=$(parent).children('.item').children('#loginName').val();

var pass=$(parent).children('.item').children('#loginPass').val();

$.ajax({

    type: "GET",  

    async:false,      

    url: genlujing+'/Home/Login/checkAll',      

    data: "name="+name+"&pass="+pass,   

    success: function(data){

        status=data;

    }            

});

while(status.indexOf('"')>=0){

status=status.replace('"',''); // "2"=》2

}

if(status>0){

$(parent).children('.msg-wrap').children('.msg-error').children('#msg-error-text').text('');

$('.login-form .msg-wrap').css('visibility','hidden');


//记录登录

$.ajax({

    type: "GET",  

    async:false,      

    url: genlujing+'/Home/Login/login',      

    data: "id="+status,   

    success: function(data){

        status2=data;

    }            

});

if(status2==1){

$('.login_layer').attr('hidden',true);

}else{

$(parent).children('.msg-wrap').children('.msg-error').children('#msg-error-text').text('登录失败');

$('.login-form .msg-wrap').css('visibility','visible');

}


}else{

$(parent).children('.msg-wrap').children('.msg-error').children('#msg-error-text').text('账号密码错误或者账号异常');

$('.login-form .msg-wrap').css('visibility','visible');

return false;

}

}

function closeBox(){

$('.login_layer').attr('hidden',true);

}

4、php(LoginController.class.php):

/*不跳转登录/单页弹框S*/

public function checkAll(){

$name=trim($_GET['name']);

$pass=trim($_GET['pass']);

if($name != '' && $pass != ''){

$re=$this->user->where("(mobile_phone='".$name."' OR email='".$name."') AND password='".md5($pass)."' AND user_status=1")->find();

    if($re){

    $this->ajaxReturn($re['id']);

    //echo json_encode($re['id']);

    }else{

    $this->ajaxReturn();

    }

}else{

$this->ajaxReturn();

}

}

public function login(){

$id=str_replace('"','',$_GET['id']);

$findRe=$this->user->where(array('id'=>$id))->find();

if($findRe['user_status']==0){//未注册完成

$_SESSION['HLid']=$id;

$_SESSION['HRegid']=$findRe['id'];

$this->redirect('Home/Register/regInfo');

}elseif($findRe['user_status']==1){//正常

$_SESSION['HLid']=$id;

$this->ajaxReturn(1);

}elseif(($findRe['user_status']==3) || ($findRe['user_status']==4)){//暂停

$this->error('抱歉,您的账号暂停','./');

}

}

/*不跳转登录/单页弹框E*/


猜你喜欢

转载自blog.csdn.net/qq_36376116/article/details/78304847