彈出層主要用于展示豐富的頁面信息，還有一個更好的應用是彈出表單層豐富交互應用。常見的應用有彈出登錄表單層，用戶提交登錄信息，后臺驗證登錄成功后，彈出層消失，主頁面局部刷新用戶信息。本文我們將給大家介紹如何使用jQuery+Ajax+PHP彈出層異步登錄的應用。

HTML

由于本例UI部分使用了Bootstrap，以及使用jQuery插件，因此需要事先載入相關文件，推薦大家使用相關的CDN資源。

接著，我們在html主體部分放置觸發彈出層的按鈕鏈接，以及彈出層主體內容。以下是HTML主要代碼：

點擊彈出登錄表單

上述代碼中，#result用來展示用戶信息，實際應用中，我們要在主網頁中顯示登錄后的用戶名等相關信息。#hw-layer-login是彈出層內容，默認是不可見的，它包含了一個登錄表單，相關CSS樣式請大家參閱Bootstrap官網。

jQuery

我們在點擊頁面中的鏈接或按鈕后，會調用hwLayer插件，觸發登錄彈出層。先加載jQUery和hwLayer插件。

然后，調用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=='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彈出層異步登錄效果(附源碼下載)的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！