用戶登錄與退出功能應(yīng)用在很多地方，而在有些項目中，我們需要使用Ajax方式進行登錄，登錄成功后只刷新頁面局部，從而提升了用戶體驗度。本文將使用PHP和jQuery來實現(xiàn)登錄和退出功能。

查看演示?下載源碼

準(zhǔn)備數(shù)據(jù)庫

本例我們使用Mysql數(shù)據(jù)庫，創(chuàng)建一張user表，表結(jié)構(gòu)如下：

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?'登錄次數(shù)',?
??PRIMARY?KEY??(`id`)?
)?ENGINE=MyISAM??DEFAULT?CHARSET=utf8;?

然后往user表中插入一條用戶信息數(shù)據(jù)：

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

index.php

用戶在輸入用戶名和密碼后，提示用戶登錄成功，并顯示相關(guān)登錄信息，如果點擊“退出”，則退出到用戶登錄界面。

進入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文件頭應(yīng)該加上語句：session_start; 同時在head部分引入jquery庫，以及包含global.js，您還可以為登錄框?qū)憘€漂亮的CSS樣式，當(dāng)然本例已經(jīng)略微寫了個簡單的樣式，請查看源碼。

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

global.js

global.js文件包括了將要實現(xiàn)的jquery代碼。首先要做的就是讓輸入框獲得焦點，像百度和google那樣一打開，鼠標(biāo)光標(biāo)就在輸入框內(nèi)。使用代碼如下：

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

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

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

用戶登錄：用戶點擊登錄按鈕后，首先要驗證用戶的輸入不能為空，然后向后臺login.php發(fā)送一個Ajax請求。當(dāng)后臺驗證登錄成功后，返回登錄用戶信息：如用戶登錄次數(shù)和上次登錄時間等；如果登錄失敗，則返回登錄失敗信息。

$(".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請求時，數(shù)據(jù)傳輸格式使用的是json，返回的數(shù)據(jù)也是json數(shù)據(jù)，使用JS將json數(shù)據(jù)解析，得到登錄后的用戶信息，然后通過append追加到#login元素下，完成登錄操作。

用戶退出：當(dāng)點擊“退出”時，向login.php發(fā)送一個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

根據(jù)前臺提交的請求，登錄時，獲取用戶輸入的用戶名和密碼，并與數(shù)據(jù)庫中對應(yīng)的用戶名和密碼進行比對，如果比對成功，則將新的更新該用戶登錄信息，并組裝json數(shù)據(jù)傳給前臺。

session_start();?
require_once?('connect.php');?
?
$action?=?$_GET['action'];?
if?($action?==?'login')?{??//登錄?
????$user?=?stripslashes(trim($_POST['user']));?
????$pass?=?stripslashes(trim($_POST['pass']));?
????if?(empty?($user))?{?
????????echo?'用戶名不能為空';?
????????exit;?
????}?
????if?(empty?($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數(shù)據(jù)?
}?
elseif?($action?==?'logout')?{??//退出?
????unset($_SESSION);?
????session_destroy();?
????echo?'1';?
}?

當(dāng)前臺請求退出時，只需注銷session就可以，并返回1給前臺JS處理。注意上述代碼中g(shù)et_client_ip()是獲取客戶端IP的函數(shù)，限于篇幅未能列出，大家可以下載源代碼查看。

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

總結(jié)

以上是生活随笔為你收集整理的PHP+jQuery+Ajax实现用户登录与退出的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。