PHP+Ajax验证码验证用户登录
用AJAX验证用户登录的一个好处是不刷新跳转页面，外加用到验证码就更安全了，摸索的写了下。一共用到三个文件:
yz.php: 生成验证码的PHP文件，将验证码将在SESSION里，供登录时对比调用
index.php:用户登录的HTML文件
loginCheck.php:验证用户登录的文件
下面一一解析:
yz.php文件
<?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里验证就好了
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>管理后台|请登录</title>
<linkrel="stylesheet"type="text/css"href="\css\a.css">
<styletype="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>
<scripttype="text/javascript"src="./js/trim.js"></script>
<scripttype="text/javascript">
<!--
functionclearX(){
document.getElementById('authCode').value="";
}
//点击图片重新获得新的验证码：
functiongetVCode(){
varvcode=document.getElementById('vcode');
vcode.src='yz.php?nocache='+newDate().getTime();
}
//定义XMLHttpRequest对象
varxmlHttp;
//创建XMLHttpRequest:
functioncreateXmlHttpRequest(){
varxmlHttp=null;
try{
//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest();
}catch(e){
//InternetExplorer
try{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
}
returnxmlHttp;
}
//AJAX检查登录:有密码，要用POST提交
functionlogin(){
varauthCode=trim(document.getElementById('authCode').value);
varusername=trim(document.getElementById('username').value);
varpassword=trim(document.getElementById('password').value);
if(username==""||password==""||authCode==""){
alert("请输入用户名和密码和验证码！");
returnfalse;
}else{
if(!xmlHttp)xmlHttp=createXmlHttpRequest();
varsend_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){
varanswer=xmlHttp.responseText;
if(answer=="ok")//跳转到管理中心页面
window.location.href="adminCenter.php";
else{
alert("用户名密码或验证码不正确!请重新输入!");
document.getElementById('username').focus();
}
}
}
}
}
//-->
</script>
</head>
<bodyonload="document.getElementById('username').focus();">
<divid="main">
<table>
<tr>
<td>用户名:<inputtype="text"id="username"/></td>
<td>密码:<inputtype="password"id="password"/></td>
<td>验证码:<inputtype="text"id="authCode"size="6"maxlength="4"value="验证码"onfocus="clearX()"/></td>
<td><imgid="vcode"src="yz.php"alt="看不清？点击换一张"onclick="getVCode()"/></td>
<td><inputid="loginButton"type="submit"value="登录"onclick="login()"/></td>
</tr>
</table>
</div>
</body>
</html>
loginCheck.php 验证用户登录的文件
<?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*fromuserswhereusername='$username'andpassword='$password'";
$result=mysql_query($SQL);
$rows=mysql_num_rows($result);
if($rows==1)//验证成功
$feedback="ok";
$_SESSION["admin"]=true;//为了后台安全，存入SESSION，表明ADMIN已登录，供后面调用
}
echo$feedback;
?>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。