php实现Ajax带有验证码的登陆注册功能

来源：互联网发布：数控车宏程序编程实例编辑：程序博客网时间：2024/05/18 03:55

php实现Ajax带有验证码的登陆注册功能

工具：wampserver+navicat

什么是Wampserver？

WampServer就是Windows下 Apache+Mysql+PHP集成安装环境，即在window下的apache、php和mysql的服务器软件，通俗的说，就是它集成了php开发所需要的数据库软件，服务器和PHP解释器，这将很大程度上减少开发的时间

什么是Navicat?

Navicat是一套快速、可靠的数据库管理工具，是以直觉化的图形用户界面而建的。将数据库更加形象直观的展现在你的面前，避免的命令行的大黑框，让你可以以安全并且简单的方式创建、组织、访问并共用信息

什么是Ajax?

首先，Ajax 不是新的编程语言，而是一种使用现有标准的新方法。Ajax 是在不重新加载整个页面的情况下，实现与服务器进行数据的交换。

做了一些前期的简单介绍以后，我们就可以搞事情了
login.html

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">    </head>    <link rel="stylesheet" href="./css/login.css">    <body>        <!-- 实现在表单顶部登陆和注册页面的转换 -->        <header id="header" class="header">            <a href="register.html">注册</a>              <a href="login.html">登陆</a>        </header>          <div class="content">            <label><input type="text" name="username" placeholder="用户名" value="" ></label>            <label><input type="password" name="password" placeholder="密码" value=""></label>            <label><input type="text" value="" name="checkNum" placeholder="请输入验证码"></label>            <img src="validcode.php" style="width:100px;height:25px;" id="code"/>            <a href="javascript:changeCode()">看不清，换一张</a>            <button class="btn" id="submit">提交</button>        </div>        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>        <script type="text/javascript">            //点击图片更新验证码            function changeCode() {               document.getElementById("code").src = "validcode.php?id=" + Math.random();            }            //敲击空格提交请求            $(document).keyup(function(event){                 if(event.keyCode ==13){                 $("#submit").trigger("click");                 }             });            //对于请求进行非空验证            $("#submit").click(function(){                var username = $("input[name='username']").val();                var password = $("input[name='password']").val();                var checkNum = $("input[name='checkNum']").val();                if(username==undefined||username===''){                    alert("用户名不能为空");                    return;                }                if(password==undefined||password==''){                    alert("密码不能为空");                    return;                }                if(checkNum==undefined||checkNum==''){                    alert("请输入验证码");                    return;                }                //将请求提交到后台                $.post(                    'login.php',                    {"username":username,"password":password,"checkNum":checkNum},                     function (result) {                     //对后台返回信息进行处理                    if (result.indexOf('success')!=-1) {                        window.location.href="https://www.baidu.com";                        //登陆成功跳转到百度首页                    } else {                        alert(result);                    }                })            })    </script>    </body></html>

head,body{    margin: 0;    padding: 0;}#header{    width: 400px;    height: 40px;    margin:auto;    background-color: red;    margin-top: 500px;    border-top-right-radius: 8px;    border-top-left-radius: 8px;}#header a{    float: left;    margin-left: 100px;    text-decoration: none;}.content{    width: 400px;    height: 200px;    margin-left: auto;    margin:auto;    margin-top: 0px;    border-bottom-right-radius: 8px;    border-bottom-left-radius: 8px;}.content label input {    width: 395px;    height: 50px;    margin-top: 0px;}

<?phpsession_start();$con=mysql_connect("localhost:3306","数据库用户名（默认为：root）","你的数据库密码");if(!$con){    die('Clould not connect:'.mysql_errno());}$salt = 'left';//对前台传来的数据进行特殊字符的转义，能够有效的防止sql注入等$username = mysql_real_escape_string($_POST["username"]);$password = mysql_real_escape_string(md5($salt.$_POST['password']));$checkNum = $_POST["checkNum"];mysql_select_db("mysql",$con);$feedback = "账户密码错误";if($checkNum==$_SESSION["validcode"]){   $SQL="select username from login where username='$username' and password='$password'";    $result=mysql_query($SQL);   $rows=mysql_num_rows($result);   if($rows!==1){       echo $feedback;   }   else{       $feedback="success";        echo $feedback;   }}?>

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8"></head><link rel="stylesheet" href="./css/register.css"><body><header id="header" class="header">    <a href="register.html">注册</a>    <a href="login.html">登陆</a></header><div class="content">    <label><input type="text" name="username" placeholder="用户名" value=""></label>    <label><input type="password" name="password" placeholder="密码" value=""></label>    <label><input type="password" name="confirm" placeholder="确认密码"></label>    <label><input type="text" value="" name="checkNum" placeholder="请输入验证码"></label>    <img src="validcode.php" style="width:100px;height:25px;" id="code"/>    <a href="javascript:changeCode()">看不清，换一张</a>    <button class="btn" id="submit">提交</button></div><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">    function changeCode() {        document.getElementById("code").src = "validcode.php?id=" + Math.random();    }    $(document).keyup(function(event){                 if(event.keyCode ==13){                 $("#submit").trigger("click");                 }             });    $("#submit").click(function () {        var username = $("input[name='username']").val();        var password = $("input[name='password']").val();        var password_confirm = $("input[name='confirm']").val();        var checkNum = $("input[name='checkNum']").val();        if (username == undefined || username === '') {            alert("用户名不能为空");            return;        }        if (password == undefined || password == '') {            alert("密码不能为空");            return;        }        if (password_confirm == undefined || password_confirm == '') {            alert("请确认密码");            return;        } else if (password_confirm !== password) {            alert("两次输入的密码不一致");            return;        }        if (checkNum == undefined || checkNum == '') {            alert("请输入验证码");            return;        }        $.post(                'register.php',                {"username": username, "password": password,"checkNum":checkNum},                function (result) {                    if (result.indexOf('注册成功')!=-1) {                        window.location.href="login.html";                        alert("注册成功");                    }                     if (result.indexOf('该用户已经存在')!=-1) {                        window.location.href="register.html";                        alert("该用户已经存在");                    }                 })    })</script></body></html>

head,body{    margin: 0;    padding: 0;}#header{    width: 400px;    height: 40px;    margin:auto;    background-color: red;    margin-top: 500px;    border-top-right-radius: 8px;    border-top-left-radius: 8px;}#header a{    float: left;    margin-left: 100px;    text-decoration: none;}.content{    width: 400px;    height: 250px;    margin-left: auto;    margin:auto;    margin-top: 0px;    border-bottom-right-radius: 8px;    border-bottom-left-radius: 8px;}.content label input {    width: 395px;    height: 50px;    margin-top: 0px;}

 <?phpsession_start();$salt = 'left';$username = mysql_real_escape_string($_POST["username"]);$password = mysql_real_escape_string(md5($salt.$_POST['password']));$checkNum = $_POST["checkNum"];$feedback = "注册失败";if($checkNum==$_SESSION["validcode"]){    $con=mysql_connect("localhost:3306","","");    if(!$con){    die('Clould not connect:'.mysql_errno());    }    mysql_select_db("mysql",$con);     $SQL="select * from login where username='$username'";    $result=mysql_query($SQL);    $rows=mysql_num_rows($result);    if($rows>=1){          $feedback="该用户已经存在";    }                                                            else{          $sql_insert = "insert into login (username,password)         values ("."'$username',"."'$password')" ;                      $res_insert = mysql_query($sql_insert);                       if($res_insert)                      {                         $feedback="注册成功";                      }                      else                      {                         $feedback="注册失败";                      }                  }  }echo $feedback;mysql_close();?>

vaildcode.php

<?php       header("Content-Type:image/png");      //开启session      session_start();      //随机4个数字      $code = "";      $arr = array();      for($i=0;$i<4;$i++){          $arr[$i] = rand(0,9);          $code .= (string)$arr[$i];      }      //设置入session中，方便比对      $_SESSION["validcode"] = $code;      //开始绘图      $width = 100;      $height = 25;      $img = imagecreatetruecolor($width,$height);      //填充背景色      $backcolor = imagecolorallocate($img,0,0,0);      imagefill($img,0,0,$backcolor);      //获取随机较深颜色       for($i=0;$i<4;$i++){          $textcolor = imagecolorallocate($img,rand(50,180),rand(50,180),rand(50,180));           imagechar($img,12,7+$i*25,3,(string)$arr[$i],$textcolor);      }      //显示图片      imagepng($img);      //销毁图片      imagedestroy($img);  ?>

最后将register.css和login.css文件放在项目的css文件夹下即可，图片为项目目录

这是数据库的表设计

接下来，我们就将整个项目的文件夹放在wamp安装目录的www文件夹下即可，例如博主的wamp安装在E盘，项目名为csdn,则目录为
然后我们就启动wampserver软件，等它由红色变为绿色后，在浏览器输入http://localhost/csdn/login.html
大功告成；

备注：
1. Ajax和form提交请求的区别？
Ajax在提交、请求、接收时，都是异步进行的，网页不需要刷新；必须要使用JS来实现，不启用JS的浏览器，无法完成该操作；
Form提交则是新建一个页面，哪怕是提交给自己本身的页面，也是需要刷新的；不需要JS
2.这仅仅只是一个简单的demo，仍有许多不足之处，例如对于连接数据库等代码可以封装起来。但是博主懒啊！！！
3.如果有任何错误或疑问，都可以留言指正和询问
4.附上源码的下载地址

阅读全文

0 0