用戶登錄與退出功能應用在很多地方，而在有些項目中，我們需要使用Ajax方式進行登錄，登錄成功后只刷新頁面局部，從而提升了用戶體驗度。本文將使用PHP和jQuery來實現登錄和退出功能。
准備數據庫
本例我們使用Mysql數據庫，創建一張user表，表結構如下：
|
1
2
3
4
5
6
7
8
9
|
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表中插入一條用戶信息數據：
|
1
2
|
INSERT
INTO
`
user
` (`id`, `username`, `
password
`, `login_time`, `login_ip`, `login_counts`)
VALUES
(1,
'demo'
,
'fe01ce2a7fbac8fafaed7c982a04e229'
,
''
,
''
, 0);
|
index.php
用戶在輸入用戶名和密碼后，提示用戶登錄成功，並顯示相關登錄信息，如果點擊“退出”，則退出到用戶登錄界面。
進入index.php，如果用戶已登錄則顯示登錄信息，如果未登錄則顯示登錄框要求用戶登錄。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<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樣式，當然本例已經略微寫了個簡單的樣式，請查看源碼。
|
1
2
|
<script type=
"text/javascript"
src=
"js/jquery.js"
></script>
<script type=
"text/javascript"
src=
"js/global.js"
></script>
|
global.js
global.js文件包括了將要實現的jquery代碼。首先要做的就是讓輸入框獲得焦點，像百度和google那樣一打開，鼠標光標就在輸入框內。使用代碼如下：
|
1
2
3
|
$(
function
(){
$(
"#user"
).focus();
});
|
接着要做的就是，當輸入框獲得和失去焦點時，分別呈現不同的樣式，比如本例中使用不同的邊框顏色，代碼如下：
|
1
2
3
4
5
6
|
$(
"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請求。當后台驗證登錄成功后，返回登錄用戶信息：如用戶登錄次數和上次登錄時間等；如果登錄失敗，則返回登錄失敗信息。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
$(
".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，頁面重新回到登錄界面。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$(
"#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數據傳給前台。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
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的函數，限於篇幅未能列出，大家可以下載源代碼查看。
好了，一套完成的用戶登錄和退出程序完成，不足之處在所難免，歡迎大家批評指正。