基于ajax实现验证码功能

实现验证码功能通常都会使用图片形式的验证码。但是,这种验证码存在一定的缺陷,例如图片难以识别、容易被机器识别等问题。因此,在某些情况下,我们可以考虑使用基于ajax实现的验证码功能来提高安全性。

具体实现步骤如下:

1.创建验证码php文件

首先,我们需要创建一个名为captcha.php的php文件,用于生成并输出验证码图片。代码示例如下:

session_start();
header("Content-type: image/png");//设置响应头部
$width = 100;//定义验证码图片的宽度
$height = 40;//定义验证码图片的高度
$code_len = 4;//验证码长度
$chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';//字符池
$code = '';
for ($i = 0; $i < $code_len; $i++) {//生成随机字符
    $code .= $chars[mt_rand(0, strlen($chars) - 1)];
}
$_SESSION['captcha'] = strtolower($code);//将验证码存储到session中
$img = imagecreatetruecolor($width, $height);//创建画布
$bg_color = imagecolorallocate($img, mt_rand(170, 255), mt_rand(170, 255), mt_rand(170, 255));//背景颜色随机
imagefill($img, 0, 0, $bg_color);//填充背景
//画验证码字符
for ($i = 0; $i < $code_len; $i++) {
    $color = imagecolorallocate($img, mt_rand(0, 150), mt_rand(0, 150), mt_rand(0, 150));//每个字符的颜色随机
    imagettftext($img, 20, mt_rand(-30, 30), $i * ($width / $code_len) + 10, mt_rand($height / 2 - 5, $height / 2 + 10), $color, 'arial.ttf', $code[$i]);
}
imagepng($img);//输出图片
imagedestroy($img);//销毁图片

2.在html中引入验证码文件

在html中,我们通过img标签引入之前创建的验证码php文件,代码示例如下:

<img id="captchaImg" src="captcha.php" alt="captcha">
<button id="changeCaptcha">看不清,换一张</button>

其中,img标签的src属性指向captcha.php,用于获取验证码图片。button标签的id为changeCaptcha,用于点击后改变验证码图片。

3.ajax获取新验证码

当用户无法识别验证码,并点击了换一张按钮时,我们需要通过ajax获取新的验证码图片并替换原来的图片。

代码示例如下:

document.getElementById('changeCaptcha').addEventListener('click', function () {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'captcha.php?time=' + new Date().getTime(), true);//防止缓存,添加时间戳
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById("captchaImg").src = xhr.responseText;
        }
    };
    xhr.send();
});

其中,我们通过XMLHttpRequest对象获取captcha.php文件,并将获取到的responseText赋给img标签的src属性,完成验证码图片的切换。

示例1:在注册界面中使用基于ajax的验证码功能

在用户注册界面中,我们通常会使用验证码功能来防止机器恶意注册。以下是注册界面的html代码示例:

<form id="registerForm" action="register.php" method="post">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <input type="text" name="captcha" placeholder="验证码">
    <img id="captchaImg" src="captcha.php" alt="captcha">
    <button id="changeCaptcha">看不清,换一张</button>
    <button type="submit">注册</button>
</form>

在用户输入完用户名、密码和验证码后,当用户点击注册按钮时,我们需要对用户输入的信息进行验证,并提交给服务器进行注册。下面是实现的JavaScript代码示例:

document.getElementById('registerForm').addEventListener('submit', function (e) {
    e.preventDefault();//取消默认提交行为
    var captchaInput = this.querySelector('input[name=captcha]');//获取验证码输入框
    if (captchaInput.value !== '' && captchaInput.value === sessionStorage.getItem('captcha')) {
        this.submit();//提交表单
    } else {
        alert('验证码错误');//提示错误信息
    }
});

document.getElementById('changeCaptcha').addEventListener('click', function () {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'captcha.php?time=' + new Date().getTime(), true);//防止缓存,添加时间戳
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById("captchaImg").src = xhr.responseText;
            sessionStorage.setItem('captcha', xhr.responseText.toLowerCase());//将验证码存储到sessionStorage中
        }
    };
    xhr.send();
});

在用户输入验证码后,我们通过sessionStorage保存用户输入的验证码,并在表单提交时进行验证。如果验证成功,则执行表单的提交操作,否则提示错误信息。

示例2:使用ajax在登录界面中实现验证码刷新

在登录界面中,我们也可以使用ajax实现验证码刷新,提高安全性。以下是登录界面的html代码示例:

<form id="loginForm" action="login.php" method="post">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <input type="text" name="captcha" placeholder="验证码">
    <div id="captchaDiv">
        <img id="captchaImg" src="captcha.php" alt="captcha">
        <button id="changeCaptcha">换一张</button>
    </div>
    <button type="submit">登录</button>
</form>

在用户输入完用户名、密码和验证码后,当用户点击登录按钮时,我们需要对用户输入的信息进行验证,并提交给服务器进行登录。我们通过JavaScript实现验证码图片的刷新效果,代码如下:

document.getElementById('changeCaptcha').addEventListener('click', function () {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'captcha.php?time=' + new Date().getTime(), true);//防止缓存,添加时间戳
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById("captchaImg").src = xhr.responseText;
        }
    };
    xhr.send();
});

在用户点击换一张按钮时,通过XMLHttpRequest对象获取captcha.php文件,并将获取到的responseText赋给img标签的src属性,完成验证码图片的切换。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:基于ajax实现验证码功能 - Python技术站

(0)
上一篇 2023年6月15日
下一篇 2023年6月15日

相关文章

  • MyBatis-Ext快速入门实战

    MyBatis-Ext快速入门实战攻略 MyBatis-Ext是MyBatis的一个增强工具包,可以提供更加便捷的使用方式,提高开发效率。本文将提供一个MyBatis-Ext的快速入门实战攻略,包含配置、实现及示例演示。 配置 引入MyBatis-Ext的依赖 xml <dependency> <groupId>com.github.…

    Java 2023年5月20日
    00
  • Springboot 配置SqlSessionFactory方式

    在Spring Boot中,我们可以使用多种方式来配置SqlSessionFactory。以下是两种常见的方式: 1. 使用MyBatis-Spring-Boot-Starter MyBatis-Spring-Boot-Starter是一个官方支持的MyBatis集成Spring Boot的插件,它可以帮助我们快速集成MyBatis和Spring Boot。…

    Java 2023年5月14日
    00
  • Docker-利用dockerfile来搭建tomcat服务的方法

    Docker是一种容器化技术,可以使用Dockerfile文件来描述应用程序及其依赖项的构建过程,同时提供了简单且易于复制、移动、并在环境中部署的容器。 以下是搭建Tomcat服务的Dockerfile文件示例: # 基础镜像 FROM openjdk:8-jre-alpine # 设置Tomcat版本 ENV TOMCAT_MAJOR=8 \ TOMCAT…

    Java 2023年6月2日
    00
  • SpringBoot使用阿里OSS实现文件云存储的方法

    下面是“SpringBoot使用阿里OSS实现文件云存储的方法”的完整攻略。 一、前置条件 在开始之前,需要先获取一个阿里云OSS账号,并创建一个Bucket用于存储文件。同时在本地安装好SpringBoot环境和Maven。 二、导入依赖 首先,在pom.xml文件中添加阿里云OSS依赖: <dependency> <groupId&gt…

    Java 2023年5月19日
    00
  • java数据库开发之JDBC的完整封装兼容多种数据库

    Java作为一种流行的编程语言,在数据库开发中也日益受到重视。它提供了一种被广泛使用的面向关系型数据库开发的API — JDBC。JDBC提供了一种标准的接口,使得Java开发人员可以使用Java语言轻松地操作各种关系型数据库。 然而,使用标准的JDBC API进行数据库开发也有它的缺陷。首先,JDBC的API较为复杂,需要程序员编写大量的重复性代码。此外…

    Java 2023年5月19日
    00
  • SpringCloud Gateway 路由配置定位原理分析

    Spring Cloud Gateway是Spring Cloud生态系统中的一个API网关,它提供了一种简单而有效的方式来路由请求、过滤请求和转换请求。在本文中,我们将详细讲解Spring Cloud Gateway的路由配置定位原理分析。 路由配置 在Spring Cloud Gateway中,我们可以使用路由配置来定义请求的路由规则。路由配置由一个或多…

    Java 2023年5月18日
    00
  • Java实现记事本功能

    Java实现记事本功能一般可以分为以下几个步骤: 1. 创建GUI界面 利用Java Swing等工具,进行界面设计,实现如文件编辑区、菜单栏、工具栏、状态栏等基础功能的设计与实现。 2. 实现文件的读写功能 通过Java IO流,实现文件的打开、保存、另存为、关闭、撤销、重做等功能,使得用户可以对文本进行编辑、保存等操作。可以使用 FileInputStr…

    Java 2023年5月18日
    00
  • SpringBoot入门实现第一个SpringBoot项目

    首先,我们需要进行一些准备工作: 安装JDK,并配置好环境变量。 安装Maven,并配置好环境变量。 安装IDEA或者其他Java开发工具。 接下来,按照以下步骤来进行SpringBoot入门实现第一个SpringBoot项目。 1. 创建一个SpringBoot项目 我们可以通过使用Spring Initializr来创建一个SpringBoot项目,步骤…

    Java 2023年5月15日
    00
合作推广
合作推广
分享本页
返回顶部