利用 Ajax 技术实现验证码

最新推荐文章于 2023-01-04 13:47:02 发布

置顶 muddyrain前端开发

最新推荐文章于 2023-01-04 13:47:02 发布

阅读量1.4k

点赞数 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>

下面分享了制作的源码谢谢观看!

☺

muddyrain前端开发

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
利用 Ajax 技术实现验证码

利用 Ajax 技术实现验证码您所在网上观看的验证码其实这些就是我们写出来的。下面我将讲解 Ajax 制作验证码的教程这个 body 部分就是页面中的效果还有样式。样式表里的讲解类选择器 ok 为绿色字体表示验证成功的颜色类选择器 err 为红色字体表示验证失败的颜色元素选择器 img 表示设置了一个小手图标还有一个相对定位距顶部5像素页面元素中的讲解...
复制链接

扫一扫