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页面
login.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'"); ?>
login.php:
<?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; }
相关文章推荐
- PHP简单实现模拟登陆功能示例
- PHP实现简单ajax Loading加载功能示例
- php+js+mysql+ajax实现简单留言板功能,新手教程
- php ajax网站浏览统计功能的简单实现第1/2页
- jsp+servlet+ajax+oracle数据库-实现简单的登陆、注册、找回密码功能(与Oralce数据库连接)
- php实现Ajax带有验证码的登陆注册功能
- php ajax网站浏览统计功能的简单实现第1/2页
- PHP简单签到功能实现
- Eclipse使用(七)—— 使用Eclipse创建JavaWeb项目并使用JDBC连接数据库实现简单的登陆注册功能
- php实现登陆模块功能示例
- PHP简单实现数字分页功能示例
- php结合表单实现一些简单功能的例子
- 转载---ajax简单三层实现登陆
- 超级简单php实现登陆记录
- 针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
- 使用php+ajax实现登录功能教程-1
- Java Web中简单实现自动登陆功能。
- 利用php代码实现网页版简单的计算器功能
- 用HTML+PHP写一个留言板来进行XSS测试&学习 第三篇(简单的过滤标签功能实现&绕过)