利用 Ajax 技术实现验证码

最新推荐文章于 2021-08-26 14:49:01 发布

置顶 muddyrain前端开发

最新推荐文章于 2021-08-26 14:49:01 发布

阅读量1.5k

点赞数 2

分类专栏： Ajax

本文链接：https://blog.csdn.net/qq_43562926/article/details/104942031

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用 Ajax 技术实现验证码

在这里插入图片描述

您所在网上观看的验证码其实这些就是我们写出来的。

下面我将讲解 Ajax 制作验证码的教程

这个 body 部分就是页面中的效果还有样式。

样式表里的讲解

类选择器 ok 为绿色字体表示验证成功的颜色
类选择器 err 为红色字体表示验证失败的颜色
元素选择器 img 表示设置了一个小手图标还有一个相对定位距顶部5像素
页面元素中的讲解
图片是用PHP 文件随机生成的图片!
输入框用Ajax请求命令给服务器来进行验证是否成功
并由PHP 返回给客户端验证是否成功

<style>
    .ok{color:green}
    .err{color:red}
    img{cursor:pointer;
    position: relative;
    top: 5px;
    }
</style>
<body>
    验证码：<input type="text" id="textCode">
    <img src="img.php" alt="" id="imgCode" title="看不清,点击换一张">
    <span id="msgCode"></span>
</body>

JS 讲解

外部嵌入 ajax.js 文件进行自定义 ajax 函数
利用 ajax 发送 get 请求到 Verification_code.php 服务器并把 input#textCode 的值发送给 php服务器以文本的形式发送
然后接收回调函数接收 PHP服务器响应回来的数据来进行页面判断来添加样式
当点击img#imgCode 图片时自动向服务器地址发送一个请求并重新刷新图片

<script src="ajax.js"></script>
<script>
        textCode.onkeyup=function(){
            if(textCode.value!=""){
                ajax(
                    "get",
                    "Verification_code.php?code="+
                    textCode.value,
                    "",
                    "text"
                ).then(
                    data=>{
                        if(data == "true"){
                            msgCode.innerHTML="验证码正确";
                            msgCode.className="ok";
                        }else{
                            msgCode.innerHTML="验证码错误";
                            msgCode.className="err";
                        }
                    }
                );
            }else{
                msgCode.innerHTML="";
            }
        }
        imgCode.onclick=function(){
            this.src="img.php";
        }
    </script>