首先在JSP页面加上生成图片的链接

<img type="image" src="auth/authCode" id="codeImage" name="codeImage" style="cursor:pointer;"/>，src需要我们自己实现，实现逻辑如下

运行后，jsp页面会发出"auth/code"请求生成验证码，并将验证码放置于session中用于验证，运行效果如下

我们在jsp页面上加上输入验证码的输入框及提交按钮，点击按钮后进行验证码判断

后台会比将收入的验证码与放置于session中的验证码进行比对，并输出结果给JSP页面进行相应处理，当判断为失败，则刷新验证码

最后，相对完整的页面和逻辑都已实现，代码如下

JSP页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ page import="java.util.*" %>
<html>
<head>
    <title>Title</title>
</head>
<%--<script src="js/jquery.min.js"></script>--%>
<script src="https://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript">
    function submitForm() {
        var inputCode=$("#authCode").attr("value");
        var list={"inputCode":inputCode};
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/x-www-form-urlencoded",
            //请求地址
            url : "auth/checkCode",
            //数据，json字符串
            data :list,
            dataType:"json",
            //请求成功
            success : function(result) {
                alert(result);
                if(result=="1"){
                    alert("验证通过");
                }else{
                    alert("验证失败，重新刷新验证码");
                    flushAuthCode();
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert(e.responseText);
            }
        });
    }
    function flushAuthCode() {
        //重新刷新验证码
        $("#codeImage").attr("src","auth/authCode?abc="+Math.random());
    }

</script>
<body>

    <form id="authForm" action="checkCode">
        <input type="text" id="authCode" name="authCode">
        <img type="image" src="auth/authCode" id="codeImage" name="codeImage" style="cursor:pointer;"/>
        <button type="button" id="submitBtn" name="submitBtn" value="提交" onclick="submitForm()"/>
    </form>
</body>
</html>

后台代码
package com.founderit.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

@Controller
@RequestMapping("auth")
public class Auth {
    private char[] codeSequence = { 'A', '1','B', 'C', '2','D','3', 'E','4', 'F', '5','G','6', 'H', '7','I', '8','J',
            'K',   '9' ,'L', '1','M',  '2','N',  'P', '3', 'Q', '4', 'R', 'S', 'T', 'U', 'V', 'W',
            'X', 'Y', 'Z'};
    @RequestMapping("authCode")
    public void getCode(HttpServletResponse response, HttpSession session) throws IOException {
        int width = 63;
        int height = 37;
        Random random = new Random();
        //设置response头信息
        //禁止缓存
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);

        //生成缓冲区image类
        BufferedImage image = new BufferedImage(width, height, 1);
        //产生image类的Graphics用于绘制操作
        Graphics g = image.getGraphics();
        //Graphics类的样式
        g.setColor(this.getColor(200, 250));
        g.setFont(new Font("Times New Roman",0,28));
        g.fillRect(0, 0, width, height);
        //绘制干扰线
        for(int i=0;i<40;i++){
            g.setColor(this.getColor(130, 200));
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int x1 = random.nextInt(12);
            int y1 = random.nextInt(12);
            g.drawLine(x, y, x + x1, y + y1);
        }

        //绘制字符
        String strCode = "";
        for(int i=0;i<4;i++){
            String rand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
            strCode = strCode + rand;
            g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
            g.drawString(rand, 13*i+6, 28);
        }
        //将字符保存到session中用于前端的验证
        session.setAttribute("authCode", strCode.toLowerCase());
        g.dispose();

        ImageIO.write(image, "JPEG", response.getOutputStream());
        response.getOutputStream().flush();
    }

    public  Color getColor(int fc,int bc){
        Random random = new Random();
        if(fc>255)
            fc = 255;
        if(bc>255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r,g,b);
    }

    @RequestMapping(value = "checkCode",method = RequestMethod.POST)
    @ResponseBody
    public String checkAuthCode(@RequestParam(value = "inputCode") String inputCode, HttpServletRequest request){
        String checkCode=(String) request.getSession().getAttribute("authCode");
        //返回1 代表判断通过,0代表失败
        String isCode=checkCode.equals(inputCode)?"1":"0";
        return isCode;
    }
}

JSP页面验证码实现的更多相关文章

  1. jsp页面验证码(完整实例)

    项目结构如下,MyEclipse中新建一个Web Project,取名servlet 1.src下new一个servlet类 package com.servlet; import java.awt. ...

  2. jsp页面简单的验证码实现

    前段时间赶着结束毕业设计任务,现在完成了.回来补一下设计毕业设计的过程中遇到的问题和解决方案. 为了使小系统更有模有样,这里尝试在登录页面实现验证码功能.现描述一下我的解决方案. 首先看一下实现后的界 ...

  3. JSP页面生成验证码功能

    <%@ page language="java" contentType="text/html; charset=UTF-8" import=" ...

  4. JSP页面中验证码的调用方法

    步骤: 1.首先是要生成验证码 2.对验证码类进行调用:主要 实现的是  将验证码图片 输出到response.getOutputStream()这个输出流中 调用时,可以在页面调用,也可以在serv ...

  5. 使用jsp生成验证码

    在开发中验证码是比较常用到有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试的方式. 此演示程序包括三个文件: 1.index.jsp:登录页面 2.image.jsp:生成 ...

  6. Jsp制作验证码

    验证码 验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers and Humans Apart&qu ...

  7. web页面 验证码 生成

    web页面 验证码 生成 kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kapt ...

  8. jsp页面has already been called for this response错误解决方法。

    创建验证码的jsp页面提示错误:has already been called for this response <%@ page contentType="image/jpeg&q ...

  9. jsp 生成验证码代码

    调用方法:在jsp页面用图像标签便可以直接调用如下是标签代码<img border=0 src="image.jsp">,只需要把该代码发在验证码要显示的区域就可以了) ...

随机推荐

  1. gj的交换机在升级了ios之后最新数据不刷新，

    下午2点开始升级5点结束,之后监控项获取不到最新数据,显示网络接口一直是down的状态,但是登上设备之后显示的是正常up状态, 怀疑是自动发现规则的问题,但是查看之后都是1个小时,应该不会, 这时候诡 ...

  2. C# DataTable转换为Html

    /// <summary> /// DataTable 转换为 Html /// </summary> /// <param name="dt"> ...

  3. 微信小程序class封装http

    config.js var config = { base_api_url:"https://douban.uieee.com/v2/" } export {config} uti ...

  4. C博客作业01--分支顺序结构

    1.展示PTA总分 2.本章学习总结 ①C语言数据类型 ② if-else语句 if (条件) { 语句A; } else { 语句B; } 在if (条件)后不加":" 要用&q ...

  5. cnetos6.5安装Varnish

    安装依赖包: tar -zxvf docutils-0.13.1.tar.gz python setup.py install unzip pcre2-10.23.zip ./configure -- ...

  6. pyqt5设置背景图片出现问题

    在使用pyqt5时,用qtdesign设置好背景图片,如何设置自行百度,预览没问题,用ptuic5转换为代码却发现显示不了: 首先:我在qtdesign中导入的是pic.qrc,但是转换的代码最后一句 ...

  7. 实验与作业(Python)-02 Python函数入门与温度转换程序（函数、input、eval、int、float、列表）

    截止日期 实验目标 学会定义函数,使用函数.学会导入在某个文件中定义的函数. input获得值,然后通过eval或者int.float将其转换为相应的类型. 学会使用列表:访问列表.append.遍历 ...

  8. Unity3D新手入门初级教程

    根据游戏调查公司 Newzoo 针对全球手机游戏市场所做的调查报告显示,2016年全球游戏市场规模将达到 996 亿美元,其中手机游戏市场将以 21.3% 的增幅获得约 369 亿美元的收入,而中国手 ...

  9. Java URLDecoder和URLEncoder对中文进行编码和解码

    URLDecoder类包含一个decode(String s,String enc)静态方法,它可以将application/x-www-form-urlencoded MIME字符串转成普通字符串: ...

  10. Python常用模块大全

    Python常用模块大全 os模块: os.remove() 删除文件 os.unlink() 删除文件 os.rename() 重命名文件 os.listdir() 列出指定目录下所有文件 os.c ...