jQuery+Ajax+PHP彈出層非同步登入效果(附源碼下載)_jquery

彈出層主要用於展示豐富的頁面資訊，還有一個更好的應用是彈出表單層豐富互動應用。常見的應用有彈出登入表單層，使用者提交登入資訊，後台驗證登入成功後，彈出層消失，首頁面局部重新整理使用者資訊。本文我們將給大家介紹如何使用jQuery+Ajax+PHP彈出層非同步登入的應用。

效果展示        源碼下載

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">使用者名稱：helloweba，密碼：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=='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彈出層非同步登入效果(附源碼下載)的相關知識，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！