JQUERY+AJAX實現無重新整理彈出層登入思路
技術標籤:javascriptPHPH5jqueryajax彈出層
彈出層主要用於展示豐富的頁面資訊,還有一個更好的應用是彈出表單層豐富互動應用。常見的應用有彈出登入表單層,使用者提交登入資訊,後臺驗證登入成功後,彈出層消失,主頁面區域性重新整理使用者資訊。本文我們將給大家介紹如何使用jQuery+Ajax+PHP彈出層非同步登入的應用。
關於彈出層效果,我們繼續使用彈出層外掛-hwLayer。更多的靈活性體現在繫結彈出層上的表單提交按鈕事件,然後進行ajax非同步互動,最後區域性重新整理主頁面。閱讀本文,您除了需要具備HTML5、CSS3、jQuery等前端知識外,還需要了解PHP甚至MySQL的相關知識。
HTML
由於本例UI部分使用了Bootstrap,以及使用jQuery外掛,因此需要事先載入相關檔案,推薦大家使用相關的CDN資源。
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="hwLayer.css">
接著,我們在html主體部分放置觸發彈出層的按鈕連結,以及彈出層主體內容。以下是HTML主要程式碼:
<a href="#0" class="btn btn-danger btn-lg" id="form-btn" data-show-layer="hw-layer-login" role="button">點選彈出登入表單</a> <div id="result"></div> <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">使用者名稱:superw,密碼:123</span> </div> </div> </form> </div> </div> </div>
上述程式碼中,#result用來展示使用者資訊,實際應用中,我們要在主網頁中顯示登入後的使用者名稱等相關資訊。#hw-layer-login是彈出層內容,預設是不可見的,它包含了一個登入表單,相關CSS樣式請大家參閱Bootstrap官網。
jQuery
我們在點選頁面中的連結或按鈕後,會呼叫hwLayer外掛,觸發登入彈出層。先載入jQUery和hwLayer外掛。
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.hwLayer.js"></script>
然後,呼叫hwLayer外掛。
$(function(){
$('#form-btn').hwLayer({
width: 480,
tapLayer: false
});
});
現在,彈出層出來了,而關鍵的部分也來了,我們在填寫好賬號資訊,點選登入後,會發生什麼?很顯然,作為表單提交事件,我們先要驗證前端輸入的合法性,這裡我只是簡單的驗證輸入不能為空的情況。然後提交Ajax,將使用者名稱和密碼內容提交給後端login.php來處理。login.php它會驗證我們填寫的賬號資訊是否正確,並且將處理的結果以json格式返回給前端。那麼當前端收到登入成功的資訊時,將登入結果使用者名稱和登入時間顯示在主頁面#result上,即實現了大家常說的區域性重新整理效果,同時應該關閉彈出層。
$(function(){
$(".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',
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){ //登入成功
$('#result').html('歡迎您,' + res.username + ',登入時間:' + res.logintime);
$('#msg').removeClass('text-danger').addClass('text-success').text('登入成功!');
$('#hw-layer-login').hwLayer('close');
}else{
$('#msg').addClass('text-danger').text('使用者名稱或密碼錯誤!');
}
$(".hwLayer-ok").removeAttr('disabled');
}
});
});
});
PHP
以上的Ajax非同步操作當然離不開我們後端PHP,當然後端語言你可以自己選。login.php接收前端post上來的使用者名稱和密碼,然後比對驗證是否正確。這裡我偷懶,定義好了使用者名稱和密碼,而實際應用中我們應該使用PHP去讀取資料庫如MySQL中的使用者表,比對使用者表中的資訊,並且以json資料返回登入結果給前端,請看程式碼:
$username = stripslashes(trim($_POST['username']));
$password = stripslashes(trim($_POST['password']));
if($username=='superw' && $password=='123'){
$res['code'] = 1;
$res['username'] = $username;
$res['logintime'] = date('Y-m-d H:i');
}else{
$res['code'] = 0;
}
echo json_encode($res);