php与ajax实现简单登陆功能

来源：互联网发布：python f.close 编辑：程序博客网时间：2024/05/22 15:39

一、生成验证码

captcha.php：

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

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

阅读全文

0 0