PHP+jQuery+Ajax實現使用者登入與退出_php執行個體

使用者登入與退出功能應用在很多地方，而在有些項目中，我們需要使用Ajax方式進行登入，登入成功後只重新整理頁面局部，從而提升了使用者體驗度。本文將使用PHP和jQuery來實現登入和退出功能。

準備資料庫

本例我們使用Mysql資料庫，建立一張user表，表結構如下：

CREATE TABLE `user` (  `id` int(11) NOT NULL auto_increment,  `username` varchar(30) NOT NULL COMMENT '使用者名稱',  `password` varchar(32) NOT NULL COMMENT '密碼',  `login_time` int(10) default NULL COMMENT '登入時間',  `login_ip` varchar(32) default NULL COMMENT '登入IP',  `login_counts` int(10) NOT NULL default '0' COMMENT '登入次數',  PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

然後往user表中插入一條使用者資訊資料：

INSERT INTO `user` (`id`, `username`, `password`, `login_time`, `login_ip`, `login_counts`)  VALUES(1, 'demo', 'fe01ce2a7fbac8fafaed7c982a04e229', '', '', 0); 

index.php

使用者在輸入使用者名稱和密碼後，提示使用者登入成功，並顯示相關登入資訊，如果點擊“退出”，則退出到使用者登入介面。
進入index.php，如果使用者已登入則顯示登入資訊，如果未登入則顯示登入框要求使用者登入。

<div id="login">    <h3>使用者登入</h3>    <?php    if(isset($_SESSION['user'])){    ?>    <div id="result">     <p><strong><?php echo $_SESSION['user'];?></strong>，恭喜您登入成功！</p>     <p>您這是第<span><?php echo $_SESSION['login_counts'];?></span>次登入本站。</p>     <p>上次登陸本站的時間是：<span><?php echo date('Y-m-d H:i:s',$_SESSION['login_time']);?> </span></p><p><a href='#' id='logout'>【退出】</a></p>    </div>    <?php }else{?>    <div id="login_form">      <p><label>使用者名稱：</label> <input type="text" class="input" name="user" id="user" /></p>      <p><label>密 碼：</label> <input type="password" class="input" name="pass" id="pass" /> </p>      <div class="sub">        <input type="submit" class="btn" value="登 錄" />      </div>    </div>    <?php }?> </div> 

注意在index.php檔案頭應該加上語句：session_start; 同時在head部分引入jquery庫，以及包含global.js，您還可以為登入框寫個漂亮的CSS樣式，當然本例已經略微寫了個簡單的樣式，請查看源碼。

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/global.js"></script> 

global.js

global.js檔案包括了將要實現的jquery代碼。首先要做的就是讓輸入框獲得焦點，像百度和google那樣一開啟，滑鼠游標就在輸入框內。使用代碼如下：

$(function(){   $("#user").focus(); }); 

接著要做的就是，當輸入框獲得和失去焦點時，分別呈現不同的樣式，比如本例中使用不同的邊框顏色，代碼如下：

$("input:text,textarea,input:password").focus(function() {   $(this).addClass("cur_select"); }); $("input:text,textarea,input:password").blur(function() {   $(this).removeClass("cur_select"); }); 

使用者登入：使用者點擊登入按鈕後，首先要驗證使用者的輸入不可為空，然後向後台login.php發送一個Ajax請求。當後台驗證登入成功後，返回登入使用者資訊：如使用者登入次數和上次登入時間等；如果登入失敗，則返回登入失敗資訊。

$(".btn").live('click',function(){   var user = $("#user").val();   var pass = $("#pass").val();   if(user==""){     $('<div id="msg" />').html("使用者名稱不可為空！").appendTo('.sub').fadeOut(2000);     $("#user").focus();     return false;   }   if(pass==""){     $('<div id="msg" />').html("密碼不可為空！").appendTo('.sub').fadeOut(2000);     $("#pass").focus();     return false;   }   $.ajax({     type: "POST",     url: "login.php?action=login",     dataType: "json",     data: {"user":user,"pass":pass},     beforeSend: function(){       $('<div id="msg" />').addClass("loading").html("正在登入...").css("color","#999") .appendTo('.sub');     },     success: function(json){       if(json.success==1){         $("#login_form").remove();         var div = "<div id='result'><p><strong>"+json.user+"</strong>，恭喜您登入成功！</p>         <p>您這是第<span>"+json.login_counts+"</span>次登入本站。</p>         <p>上次登入本站的時間是：<span>"+json.login_time+"</span></p><p>         <a href='#' id='logout'>【退出】</a></p></div>";         $("#login").append(div);       }else{         $("#msg").remove();         $('<div id="errmsg" />').html(json.msg).css("color","#999").appendTo('.sub') .fadeOut(2000);         return false;       }     }   }); }); 

我在進行Ajax請求時，資料轉送格式使用的是json，返回的資料也是json資料，使用JS將json資料解析，得到登入後的使用者資訊，然後通過append追加到#login元素下，完成登入操作。
使用者退出：當點擊“退出”時，向login.php發送一個Ajax請求，後台登出所有Session，頁面重新回到登入介面。

$("#logout").live('click',function(){   $.post("login.php?action=logout",function(msg){     if(msg==1){        $("#result").remove();        var div = "<div id='login_form'><p><label>使用者名稱：</label>        <input type='text' class='input' name='user' id='user' /></p>        <p><label>密 碼：</label> <input type='password' class='input' name='pass' id='pass' /></p>        <div class='sub'><input type='submit' class='btn' value='登 錄' /></div>        </div>";        $("#login").append(div);     }   }); }); 

login.php

根據前台提交的請求，登入時，擷取使用者輸入的使用者名稱和密碼，並與資料庫中對應的使用者名稱和密碼進行比對，如果比對成功，則將新的更新該使用者登入資訊，並組裝json資料傳給前台。

session_start(); require_once ('connect.php');  $action = $_GET['action']; if ($action == 'login') { //登入   $user = stripslashes(trim($_POST['user']));   $pass = stripslashes(trim($_POST['pass']));   if (emptyempty ($user)) {     echo '使用者名稱不可為空';     exit;   }   if (emptyempty ($pass)) {     echo '密碼不可為空';     exit;   }   $md5pass = md5($pass); //密碼使用md5加密   $query = mysql_query("select * from user where username='$user'");    $us = is_array($row = mysql_fetch_array($query));    $ps = $us ? $md5pass == $row['password'] : FALSE;   if ($ps) {     $counts = $row['login_counts'] + 1;     $_SESSION['user'] = $row['username'];     $_SESSION['login_time'] = $row['login_time'];     $_SESSION['login_counts'] = $counts;     $ip = get_client_ip(); //擷取登入IP     $logintime = mktime();     $rs = mysql_query("update user set login_time='$logintime',login_ip='$ip', login_counts='$counts'");     if ($rs) {       $arr['success'] = 1;       $arr['msg'] = '登入成功！';       $arr['user'] = $_SESSION['user'];       $arr['login_time'] = date('Y-m-d H:i:s',$_SESSION['login_time']);       $arr['login_counts'] = $_SESSION['login_counts'];     } else {       $arr['success'] = 0;       $arr['msg'] = '登入失敗';     }   } else {     $arr['success'] = 0;     $arr['msg'] = '使用者名稱或密碼錯誤！';   }   echo json_encode($arr); //輸出json資料 } elseif ($action == 'logout') { //退出   unset($_SESSION);   session_destroy();   echo '1'; } 

當前台請求退出時，只需登出session就可以，並返回1給前台JS處理。注意上述代碼中get_client_ip()是擷取用戶端IP的函數，限於篇幅未能列出，大家可以下載原始碼查看。

好了，一套完成的使用者登入和退出程式完成，不足之處在所難免，歡迎大家批評指正。

以上所述就是本文的全部內容了，希望大家能夠喜歡。