index.php
<div class="main">
<div class="col-md-12">
<div class="hw-overlay" id="hw-layer-login">
<div class="hw-layer-wrap">
<button type="button" class="close hwLayer-close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="hw-layer-title">用户登录</h3>
<div class="row">
<form class="form-horizontal" action="login.php" method="post" id="login-form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
<input type="text" class="form-control" name="user" id="user" placeholder="请输入账号">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-md-11 col-md-offset-1">
<button type="submit" class="btn btn-success hwLayer-ok">登录</button>
<span id="msg"></span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="login">
<?php
session_start();
if(isset($_SESSION['username'])){
?>
<div id="result">
<div class='login-box'>
<div class='userimage' id ='secc'><img src='./images/L1.jpg'></div>
<div class='login_s'>
<?php echo $_SESSION['username'];?>
<div class='little_img'>
<p><a href='#' id='logout'>退出</a></p>
</div>
</div>
</div>
</div>
<?php }else{ ?>
<div id="login_form">
<div class="login-box">
<button href="#" class="btn btn-primary btn-lg" id="form-btn" data-show-layer="hw-layer-login" role="button">登录</button>
<button href="#" class="btn btn-danger btn-lg" id="form-btn" data-show-layer="hw-layer-login" role="button">
注册</button>
</div>
</div>
<?php } ?>
</div>
login.php
<?php
session_start();
include 'common/config.php';
if (!$con) {
exit;
}
$action = $_GET['action'];
if($action == 'login'){
//获取AJAX提交过来的帐号（安全起见做了安全过滤）
$username = htmlspecialchars($_POST['username']);
//获取AJAX提交过来的密码（安全起见做了安全过滤）
$password = md5(htmlspecialchars($_POST['password']));
if($result = mysqli_query($con, "SELECT * FROM user WHERE username = '{$username}' ")){
/* Fetch the results of the query 返回查询的结果 */
$row = mysqli_fetch_assoc($result);
/* Destroy the result set and free the memory used for it 结束查询释放内存 */
mysqli_free_result($result);
}
function_exists(date_default_timezone_set);//在这他总是返回1,这函数是判断这里面的字符是不是一个定义了的函数名
date_default_timezone_set('PRC'); //设置中国时区
//判断输入的帐号密码是否正确（一般这里是从数据库获取数据来与提交的数据进行对比）
if($username == $row['username'] && $password == $row['password']) {
//登录成功 返回code=1，logintime=时间为当前时间
$arr = array("code"=>1,"logintime"=>date("Y-m-d H:i:s"),"username" => "$username");
}
else{
//登录失败 返回code=2，logintime=时间为当前时间
$arr = array("code"=>2,"logintime"=>date("Y-m-d H:i:s"));
}
//将PHP数组转换成JSON格式数据，以便前台JS好接收返回值
echo json_encode($arr);
$_SESSION['username'] = $row['username'];
/* Close the connection 关闭连接*/
mysqli_close($con);
}
elseif ($action == 'logout') { //退出
unset($_SESSION);
session_destroy();
echo '1';
}
?>
index.js
$(function(){
$('#form-btn').hwLayer({
width: 480,
tapLayer: false,
afterClose: function(){
console.log('close');
}
});
$(".hwLayer-ok").on('click', function(event) {
event.preventDefault();
var user = $('#user').val();
var pass = $('#password').val();
if(user==''){
$('#msg').addClass('text-danger').text('用户名不能为空！');
return false;
}
if(pass==''){
$('#msg').addClass('text-danger').text('密码不能为空！');
return false;
}
$.ajax({
url: 'login.php?action=login',
type: 'POST',
dataType: 'json',
data: {username: user,password: pass},
beforeSend: function(){
$('#msg').addClass('text-success').text('正在登录...');
$(".hwLayer-ok").attr('disabled',true);
},
success: function(res){
if(res.code==1){ //登录成功
$('#login_form').remove();
var div =
"<div id='result'><div class='login-box'><div class='userimage' id ='secc'><img src='./images/L1.jpg'></div>"
+ "<div class='login_s'>"
+ res.username
+ "<div class='little_img'>"
+ "<p><a href='#' id='logout'>退出</a></p>"
+ "</div>"
+ "</div>"
+"</div>";
$('#login').append(div);
$('#msg').removeClass('text-danger').addClass('text-success').text('登录成功！');
$('#hw-layer-login').hwLayer('close');
window.location.reload();
}else{
$('#msg').addClass('text-danger').text('用户名或密码错误！');
}
$(".hwLayer-ok").removeAttr('disabled');
}
});
});
$("#logout").on('click',function(){
$.post("login.php?action=logout",function(msg){
if(msg==1){
$("#result").remove();
var div =
"<div id='login_form'><div class='login-box'>"
+ "<button href='#' class='btn btn-primary btn-lg' id='form-btn' data-show-layer='hw-layer-login' role='button'>登录</button>"
+ "<button href='#' class='btn btn-danger btn-lg' id='form-btn' data-show-layer='hw-layer-login' role='button'>注册</button>"
+"</div></div>";
$("#login").append(div);
window.location.reload();
}
});
});
});
参考