用AJAX 驗(yàn)證用戶登錄的一個(gè)好處是不刷新跳轉(zhuǎn)頁面，外加用到驗(yàn)證碼就更安全了，摸索的寫了下。一共用到三個(gè)文件:
yz.php: 生成驗(yàn)證碼的PHP 文件，將驗(yàn)證碼將在SESSION 里，供登錄時(shí)對比調(diào)用
index.php: 用戶登錄的HTML 文件
loginCheck.php: 驗(yàn)證用戶登錄的文件
下面一一解析:
yz.php 文件
<?php
session_start();
//生成驗(yàn)證碼圖
Header("Content-type: image/PNG");
//長與寬
$im = imagecreate(44,18);
// 設(shè)置背景色:
$back = ImageColorAllocate($im, 245,245,245);
// 填充背景色:
imagefill($im,0,0,$back);
srand((double)microtime()*1000000);
$vcodes;
//生成4位數(shù)字
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);
// 將四位的驗(yàn)證碼保存在 SESSION 里，登錄時(shí)調(diào)用對比
$_SESSION["VCODE"]=$vcodes;
?>
index.php: 注意，在這文件里不要取 $_SESSION["VCODE"], 否則會取晚一步的，刷新后才能顯示上一個(gè)驗(yàn)證碼
在 loginCheck.php 里驗(yàn)證就好了
<!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="";
}
// 點(diǎn)擊圖片重新獲得新的驗(yàn)證碼：
function getVCode() {
var vcode=document.getElementById('vcode');
vcode.src ='yz.php?nocache='+new Date().getTime();
}
//定義XMLHttpRequest對象
var xmlHttp;
// 創(chuàng)建 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("請輸入用戶名和密碼和驗(yàn)證碼！");
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") //跳轉(zhuǎn)到管理中心頁面
window.location.href="adminCenter.php";
else{
alert("用戶名密碼或驗(yàn)證碼不正確! 請重新輸入!");
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>驗(yàn)證碼:<input type="text" id="authCode" size="6" maxlength="4" value="驗(yàn)證碼" onfocus="clearX()"/></td>
<td><img id="vcode" src="yz.php" alt="看不清？點(diǎn)擊換一張" onclick="getVCode()" /></td>
<td><input id="loginButton" type="submit" value="登 錄" onclick="login()"/></td>
</tr>
</table>
</div>
</body>
</html>
loginCheck.php 驗(yàn)證用戶登錄的文件
<?php
session_start();
include("../conn/connDB.php");
// 取得POST過來的參數(shù):
$username=$_POST["username"];
$password=md5($_POST["password"]);
$authCode=$_POST["authCode"];
$feedback="no";
//對比是否==SESSION中的驗(yàn)證碼，不能放在客戶端做，否則取不正確的值
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) // 驗(yàn)證成功
$feedback="ok";
$_SESSION["admin"]=true; //為了后臺安全，存入SESSION，表明 ADMIN 已登錄，供后面調(diào)用
}
echo $feedback;
?>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助
版權(quán)所有:易賢網(wǎng)
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試