用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 里驗證就好了
<!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" <td><input id="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 * 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; ?>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
圖片精選
