用戶登錄與退出功能應用在很(hěn)多(duō)地方，而在有(yǒu)些(xiē)項目中，我們需要使用Ajax方式進行(xíng)登錄，登錄成功後隻刷新頁面局部，從而提升了用戶體(tǐ)驗度。本文将使用PHP和(hé)jQuery來(lái)實現登錄和(hé)退出功能。

準備數(shù)據庫

本例我們使用Mysql數(shù)據庫，創建一張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 '登錄時(shí)間(jiān)',
  `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ù)據：

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

index.php

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

進入index.php，如果用戶已登錄則顯示登錄信息，如果未登錄則顯示登錄框要求用戶登錄。

	
	

		用戶登錄
	

	

		
		

			，恭喜您登錄成功！
		

		

			您這是第次登錄本站(zhàn)。
		

		

			上(shàng)次登陸本站(zhàn)的時(shí)間(jiān)是： 
		

		

			【退出】
		

	

	

		
		

			用戶名：
		

		

			密 碼：
		

		

			
		

	

注意在index.php文件頭應該加上(shàng)語句：session_start; 同時(shí)在head部分引入jquery庫，以及包含global.js，您還(hái)可(kě)以為(wèi)登錄框寫個(gè)漂亮的CSS樣式，當然本例已經略微寫了個(gè)簡單的樣式，請(qǐng)查看源碼。

global.js

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

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

接着要做(zuò)的就是，當輸入框獲得(de)和(hé)失去焦點時(shí)，分别呈現不同的樣式，比如本例中使用不同的邊框顔色，代碼如下：

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

用戶登錄：用戶點擊登錄按鈕後，首先要驗證用戶的輸入不能為(wèi)空(kōng)，然後向後台login.php發送一個(gè)Ajax請(qǐng)求。當後台驗證登錄成功後，返回登錄用戶信息：如用戶登錄次數(shù)和(hé)上(shàng)次登錄時(shí)間(jiān)等；如果登錄失敗，則返回登錄失敗信息。

$(".btn").live('click',function(){
	var user = $("#user").val();
	var pass = $("#pass").val();
	if(user==""){
		$('

	').html("用戶名不能為(wèi)空(kōng)！").appendTo('.sub').fadeOut(2000);
		$("#user").focus();
		return false;
	}
	if(pass==""){
		$('
	

		').html("密碼不能為(wèi)空(kōng)！").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(){
			$('
		

			').addClass("loading").html("正在登錄...").css("color","#999")
.appendTo('.sub');
		},
		success: function(json){
			if(json.success==1){
				$("#login_form").remove();
				var div = "
			

				
				

					"+json.user+"，恭喜您登錄成功！
				

				

					您這是第"+json.login_counts+"次登錄本站(zhàn)。
				

				

					上(shàng)次登錄本站(zhàn)的時(shí)間(jiān)是："+json.login_time+"
				

				

					【退出】
				

			
";
				$("#login").append(div);
			}else{
				$("#msg").remove();
				$('
			

				').html(json.msg).css("color","#999").appendTo('.sub')
.fadeOut(2000);
				return false;
			}
		}
	});
});
			

		

	

我在進行(xíng)Ajax請(qǐng)求時(shí)，數(shù)據傳輸格式使用的是json，返回的數(shù)據也是json數(shù)據，使用JS将json數(shù)據解析，得(de)到登錄後的用戶信息，然後通(tōng)過append追加到#login元素下，完成登錄操作(zuò)。

用戶退出：當點擊“退出”時(shí)，向login.php發送一個(gè)Ajax請(qǐng)求，後台注銷所有(yǒu)Session，頁面重新回到登錄界面。

$("#logout").live('click',function(){
	$.post("login.php?action=logout",function(msg){
		if(msg==1){
			 $("#result").remove();
			 var div = "

	
	

		用戶名：
	

	

		密 碼：
	

	

		
	


";
			 $("#login").append(div);
		}
	});
});

login.php

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

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 '用戶名不能為(wèi)空(kōng)';
		exit;
	}
	if (empty ($pass)) {
		echo '密碼不能為(wèi)空(kōng)';
		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ù)據
}
elseif ($action == 'logout') {  //退出
	unset($_SESSION);
	session_destroy();
	echo '1';
}

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

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