本篇內(nèi)容介紹了“jQuery+Ajax+PHP怎么實現(xiàn)彈出層異步登錄”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
關(guān)于彈出層效果，我們繼續(xù)使用本站helloweba上篇文章中寫的彈出層插件-hwLayer。更多的靈活性體現(xiàn)在綁定彈出層上的表單提交按鈕事件，然后進行ajax異步交互，最后局部刷新主頁面，大家可以先看demo演示。閱讀本文，您除了需要具備HTML5、CSS3、jQuery等前端知識外，還需要了解PHP甚至MySQL的相關(guān)知識。
由于本例UI部分使用了Bootstrap，以及使用jQuery插件，因此需要事先載入相關(guān)文件，推薦大家使用相關(guān)的CDN資源。
接著，我們在html主體部分放置觸發(fā)彈出層的按鈕鏈接，以及彈出層主體內(nèi)容。以下是HTML主要代碼：
點擊彈出登錄表單
用戶登錄
用戶名：helloweba，密碼：123
上述代碼中，#result用來展示用戶信息，實際應(yīng)用中，我們要在主網(wǎng)頁中顯示登錄后的用戶名等相關(guān)信息。#hw-layer-login是彈出層內(nèi)容，默認(rèn)是不可見的，它包含了一個登錄表單，相關(guān)CSS樣式請大家參閱Bootstrap官網(wǎng)。
我們在點擊頁面中的鏈接或按鈕后，會調(diào)用hwLayer插件，觸發(fā)登錄彈出層。先加載jQUery和hwLayer插件。
然后，調(diào)用hwLayer插件。
$(function(){
$('#form-btn').hwLayer({
width: 480,
tapLayer: false
});
});
現(xiàn)在，彈出層出來了，而關(guān)鍵的部分也來了，我們在填寫好賬號信息，點擊登錄后，會發(fā)生什么？很顯然，作為表單提交事件，我們先要驗證前端輸入的合法性，這里我只是簡單的驗證輸入不能為空的情況。然后提交Ajax，將用戶名和密碼內(nèi)容提交給后端login.php來處理。login.php它會驗證我們填寫的賬號信息是否正確，并且將處理的結(jié)果以json格式返回給前端。那么當(dāng)前端收到登錄成功的信息時，將登錄結(jié)果用戶名和登錄時間顯示在主頁面#result上，即實現(xiàn)了大家常說的局部刷新效果，同時應(yīng)該關(guān)閉彈出層。
$(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');
}
});
});
});
以上的Ajax異步操作當(dāng)然離不開我們后端PHP，當(dāng)然后端語言你可以自己選。login.php接收前端post上來的用戶名和密碼，然后比對驗證是否正確。這里我偷懶，定義好了用戶名和密碼，而實際應(yīng)用中我們應(yīng)該使用PHP去讀取數(shù)據(jù)庫如MySQL中的用戶表，比對用戶表中的信息，并且以json數(shù)據(jù)返回登錄結(jié)果給前端，請看代碼：
$username = stripslashes(trim($_POST['username']));
$password = stripslashes(trim($_POST['password']));
if($username=='helloweba' && $password=='123'){
$res['code'] = 1;
$res['username'] = $username;
$res['logintime'] = date('Y-m-d H:i');
}else{
$res['code'] = 0;
}
echo json_encode($res);
“jQuery+Ajax+PHP怎么實現(xiàn)彈出層異步登錄”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
重慶分公司
重慶分公司
