PHP+Mysql+Ajax+html彈窗登錄```
阿新 • • 發佈：2019-03-16
data- 登錄 _for dem val pos $.ajax clu sta
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();
}
});
});
});參考
https://www.helloweba.net/demo/login/
https://www.jb51.net/article/85221.htm
http://www.w3school.com.cn/ajax/ajax_asp_php.asp
PHP+Mysql+Ajax+html彈窗登錄```