php与ajax实现简单登陆功能
一、生成验证码
captcha.php：
$image=imagecreatetruecolor(100, 30);
$bgcolor=imagecolorallocate($image, 255, 255, 255);//设置背景为白色,默认为黑色
imagefill($image, 0, 0, $bgcolor);//填充颜色，把所有与（x，y）颜色相同的点都涂成bgcolor
$captch_code='';//保存验证码的变量
for($i=0;$i<4;$i++){
$fontsize=1500;//字体大小为6px
$fontcolor=imagecolorallocate($image, rand(0,120),rand(0,120),rand(0,120));
$data='3456789qwertyuipkjhgfdsaxcvbnmQWERTYUIPLKJHGFDSAXCVBNM';//字母数字混合字典
$fontcontent=substr($data, rand(0,strlen($data)),1);//取从0到末尾这一段中的随机一个字符
$captch_code.=$fontcontent;//加入到保存验证码的变量中
$x=rand(5,10)+($i*100/4);
$y=rand(5,10);
imagestring($image, $fontsize, $x, $y, $fontcontent, $fontcolor);
}
for($i=0;$i<200;$i++){
$pointcolor=imagecolorallocate($image, rand(50,200),rand(50,200), rand(50,200));
imagesetpixel($image, rand(1,99), rand(1,29), $pointcolor);//画两百个随机位置随机颜色的点，作为干扰元素
}
for($i=0;$i<3;$i++){
$linecolor=imagecolorallocate($image, rand(80,220), rand(80,220), rand(80,220));
imageline($image, rand(1,99), rand(1,29), rand(1,99), rand(1,29), $linecolor);//画三条随机位置随机颜色的线
}
$_SESSION['authcode']=strtolower($captch_code);//把生成的验证码保存到session服务器
header('content-type:image/png');
imagepng($image);
imagedestroy($image);
?>二、html页面
login.html：
<html>
<head>
<meta charset="UTF-8" />
<script src="http://apps.bdimg.com/libs/jquery/1.2.3/jquery.min.js">script>
<script src="login.js">script>
head>
<body>
<div style="margin: 0 auto;">
<form class="login">
<table>
<tr>
<td>昵称：td>
<td><input type="text" name="username" id='username' maxlength="12" onload="this.focus();"/>td>
tr>
<tr>
<td>密码：td>
<td><input type="password" name="password" id='password' maxlength="12" />td>
tr>
<tr>
<td>验证码：td>
<td>
<input type="text" name="ver_code" id="ver_code" maxLength="4" />
<img id="captcha_img" border="1" src="captcha.php?r=" width="80" height="35" />
<a href="javascript:void(0)" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()"><span>看不清？换一个！span>a>
td>
tr>
<tr>
<td><input type="submit" id="submit" name="submitreg" value="登陆" onclick="return login()"/>td>
tr>
table>
form>
div>
body>
html>三、后台实现
config.inc.php：
$server="localhost";//mysql服务器地址
$user="root";//登陆mysql的用户名
$pass="";//登陆mysql的密码
$db_name="final";//mysql中要操作的数据库名
$hd=@mysql_connect($server,$user,$pass) or die("抱歉，无法连接");
$db=mysql_select_db($db_name,$hd);
mysql_query("SET names 'utf8'");
?>login.php：
session_start();
require_once "config.inc.php";
$username = $_POST['username'];
$password = $_POST['password'];
$ver_code=$_POST['ver_code'];
//验证验证码
if (strtolower($ver_code)==$_SESSION['authcode']){
$check_st="select * from user where name='$username'";
$re_st=mysql_query($check_st);
$co=mysql_fetch_array($re_st);
if ($co){
//验证用户是否存在
if ($password==$co['password']){
$_SESSION['user']=$username;
$data=array("status"=>"登陆成功！");
}else{
$data=array("status"=>"密码错误！");
}
}else{
$data=array("status"=>"用户不存在！");
}
}else{
$data=array("status"=>"验证码错误！");
}
echo json_encode($data);四、js
login.js：
function login() {
var username = document.getElementById('username');
var password = document.getElementById('password');
var ver_code = document.getElementById('ver_code');
if (username.value == "") {
alert("用户名不能为空，请重新输入。");
password.value = "";
username.focus();
username.select();
} else if (password.value == "") {
alert("密码不能为空，请重新输入。");
password.focus();
password.select();
} else if (ver_code.value == "") {
alert("验证码不能为空，请重新输入。");
ver_code.focus();
ver_code.select();
} else {
$.ajax({
type:'post',
url:'login.php',
data:{
username:username.value,
password:password.value,
ver_code:ver_code.value
},
dataType:'json',
success:function(data){
if(data.status!="登陆成功！"){
alert(data.status);
location=location;
}else{
alert(data.status);
//登陆成功跳转
//location='home.html';
}
}
});
}
return false;
}