用AJAX 验证用户登录的一个好处是不刷新跳转页面,外加用到验证码就更安全了,摸索的写了下。一共用到三个文件:
yz.php: 生成验证码的PHP 文件,将验证码将在SESSION 里,供登录时对比调用
index.php: 用户登录的HTML 文件
loginCheck.php: 验证用户登录的文件
下面一一解析:
yz.php 文件
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
|
<?php session_start(); //生成验证码图 Header( "Content-type: image/PNG" ); //长与宽 $im = imagecreate(44,18); // 设置背景色: $back = ImageColorAllocate( $im , 245,245,245); // 填充背景色: imagefill( $im ,0,0, $back ); srand((double)microtime()*1000000); $vcodes ; //生成4位数字 for ( $i =0; $i <4; $i ++){ $font = ImageColorAllocate( $im , rand(100,255),rand(0,100),rand(100,255)); $authnum =rand(1,9); $vcodes .= $authnum ; imagestring( $im , 5, 2+ $i *10, 1, $authnum , $font ); } //加入干扰象素 for ( $i =0; $i <100; $i ++){ $randcolor = ImageColorallocate( $im ,rand(0,255),rand(0,255),rand(0,255)); imagesetpixel( $im , rand()%70 , rand()%30 , $randcolor ); } ImagePNG( $im ); ImageDestroy( $im ); // 将四位的验证码保存在 SESSION 里,登录时调用对比 $_SESSION [ "VCODE" ]= $vcodes ; ?> |
index.php: 注意,在这文件里不要取 $_SESSION["VCODE"], 否则会取晚一步的,刷新后才能显示上一个验证码
在 loginCheck.php 里验证就好了
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=gb2312" > < title >管理后台| 请登录</ title > < link rel = "stylesheet" type = "text/css" href = "\css\a.css" > < style type = "text/css" > <!-- #main{ font-family:宋体; font-size:10pt; text-align:center; margin-top:510px; } body{ background-attachment:fixed; background-position:center; background-image:url(./images/w2.jpg); background-repeat: no-repeat; } #authCode{background-Color:#F8F9FF;} table{text-align:center;} //--> </ style > < script type = "text/javascript" src = "./js/trim.js" ></ script > < script type = "text/javascript" > <!-- function clearX(){ document.getElementById('authCode').value=""; } // 点击图片重新获得新的验证码: function getVCode() { var vcode=document.getElementById('vcode'); vcode.src ='yz.php?nocache='+new Date().getTime(); } //定义XMLHttpRequest对象 var xmlHttp; // 创建 XMLHttpRequest: function createXmlHttpRequest(){ var xmlHttp=null; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch(e){ // Internet Explorer try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } // AJAX 检查登录: 有密码,要用POST 提交 function login(){ var authCode=trim(document.getElementById('authCode').value); var username=trim(document.getElementById('username').value); var password=trim(document.getElementById('password').value); if(username=="" || password=="" || authCode==""){ alert("请输入用户名和密码和验证码!"); return false; }else{ if(!xmlHttp) xmlHttp=createXmlHttpRequest(); var send_string="username="+username+"&password="+password+"&authCode="+authCode+"&fresh="+Math.random(); xmlHttp.open("POST","loginCheck.php",true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(send_string); xmlHttp.onreadystatechange=function(){ if(xmlHttp.readystate==4 && xmlHttp.status==200){ var answer=xmlHttp.responseText; if(answer=="ok") //跳转到管理中心页面 window.location.href="adminCenter.php"; else{ alert("用户名密码或验证码不正确! 请重新输入!"); document.getElementById('username').focus(); } } } } } //--> </ script > </ head > < body onload = "document.getElementById('username').focus();" > < div id = "main" > < table > < tr > < td >用户名:< input type = "text" id = "username" /></ td > < td >密 码:< input type = "password" id = "password" /></ td > < td >验证码:< input type = "text" id = "authCode" size = "6" maxlength = "4" value = "验证码" onfocus = "clearX()" /></ td > < td >< img id = "vcode" src = "yz.php" alt = "看不清?点击换一张" onclick = "getVCode()" /></ td > < td >< input id = "loginButton" type = "submit" value = "登 录" onclick = "login()" /></ td > </ tr > </ table > </ div > </ body > </ html > |
loginCheck.php 验证用户登录的文件
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
|
<?php session_start(); include ( "../conn/connDB.php" ); // 取得POST过来的参数: $username = $_POST [ "username" ]; $password =md5( $_POST [ "password" ]); $authCode = $_POST [ "authCode" ]; $feedback = "no" ; //对比是否==SESSION中的验证码,不能放在客户端做,否则取不正确的值 if ( $authCode == $_SESSION [ "VCODE" ]){ $SQL = "select * from users where username='$username' and password='$password'" ; $result =mysql_query( $SQL ); $rows =mysql_num_rows( $result ); if ( $rows ==1) // 验证成功 $feedback = "ok" ; $_SESSION [ "admin" ]=true; //为了后台安全,存入SESSION,表明 ADMIN 已登录,供后面调用 } echo $feedback ; ?> |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。