您的位置：首页 > 编程语言 > PHP开发

php与ajax实现简单登陆功能

2017-08-13 15:34 671 查看

一、生成验证码

captcha.php：

<?php
session_start();
$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页面

<!DOCTYPE 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=<?php echo rand();?>" 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：

<?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'");
?>

<?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

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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航