验证码校验(Ajax)

show.jsp

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

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>验证码</title>

</head>

<script type="text/javascript">

function reLoadImg(){

    document.getElementById("checkcodeId").innerHTML="";

    document.getElementById("d1").innerHTML="";

    document.getElementById("imageId").src="img.jsp?t="+(new Date().getTime());

}

function check(){

    var ajax;

    var inputCode=document.getElementById("checkcodeId").value;

    //conlse.log(res);

    if(window.XMLHttpRequest){//火狐

        ajax= new XMLHttpRequest();

    }else if(window.ActiveXObject){//ie

        ajax=new ActiveXObject("Msxml2.XMLHTTP");

    }

    //queryString=queryString+"param=" + new Date().getTime();  

    ajax.onreadystatechange = function () {

        //判断ajax状态码

        if(ajax.readyState==4){

            //alert(5);

            //判断响应状态码（200、405、404、500）

            if(ajax.status==200){

                //获取响应内容（相应内容的格式）

                var res=ajax.responseText;

                //console.log(res[0]+" "+res[1]);

                eval("var obj="+res);

                console.log(obj);

                if(obj==true){//返回的字符串比较的时候不能带双引号

                    document.getElementById("d1").innerHTML="验证码正确";

                }else if(obj==false){

                    document.getElementById("d1").innerHTML="验证码错误";

                }

            }

        }

    }

    ajax.open("get","check?inputCode="+inputCode);

    ajax.send(null);

}

</script>

<body>验证码：

<input type="text" size="4" name="checkcode" id="checkcodeId">

  <img src="img.jsp" id="imageId"/>

  <a href="javascript:reLoadImg()">看不清</a>

  <br>

<button onclick="check()">按钮</button>

<div id="d1"></div>

</body>

</html>

注意：后台返回的字符串在js中做判断时，字符串不用加双引号

img.jsp（画验证码）

这里的理论依据是：

网页链接：http://tool.oschina.net/commons/

之前我们的写的jsp都是当成一个html去展示的所以contentype=text/html;

现在如果我们需要将jsp当作产生验证码的图片格式那么contentype就必须要改变了

<%@page import="javax.imageio.ImageIO"%>

<%@page import="java.awt.Graphics"%>

<%@page import="java.awt.image.BufferedImage"%>

<%@page import="java.util.Random"%>

<%@page import="java.awt.Color"%>

<%@page import="java.awt.Font"%>

<%@ page language="java" contentType="image/jpeg; charset=utf-8"

    pageEncoding="utf-8"%>

<%!

//随机产生颜色

public Color getColor(){

int r=(int)(Math.random()*255);

int g=(int)(Math.random()*255);

int b=(int)(Math.random()*255);

return new Color(r,g,b);    //三个参数RGB

}

//产生验证码值

public String getnum(){

Random r = new Random();

String num=1000+r.nextInt(9000)+"";

return num;

}

%>

<%

//由于验证码必须是每次都不一样所以设置为禁止缓存

response.setHeader("Pragma", "no-cache");

response.setHeader("Cache-Control","no-cache");

response.setHeader("Expirse", "0");

//绘制验证码

BufferedImage image=new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);

//画笔

    Graphics graphics= image.getGraphics();

    graphics.fillRect(0, 0, 80, 30);

//绘制干扰线条

for(int i=0;i<30;i++){

    Random r=new Random();

    int xBegin=r.nextInt(80);

    int yBegin=r.nextInt(30);

    int xEnd=r.nextInt(xBegin+10);

    int yEnd=r.nextInt(yBegin+10);

    //设置画笔颜色随机

    graphics.setColor(getColor());

    //画线

    graphics.drawLine(xBegin, yBegin,xEnd,yEnd);

}

//验证码画笔为黑色

graphics.setColor(Color.BLACK);

String checkCode=getnum();

StringBuffer sb = new StringBuffer("");

for(int i=0;i<checkCode.length();i++){

    sb.append(checkCode.charAt(i)+" ");

}

graphics.drawString(sb.toString(), 15, 20);

graphics.setFont(new Font("宋体",Font.BOLD,20));

//将正确验证码保存在session中方便比对

session.setAttribute("trueCheckCode",checkCode);

ImageIO.write(image, "jpeg", response.getOutputStream());

//关闭

out.clear();

out=pageContext.pushBody();

%>

处理的Servlet

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/check")

public class checkOut extends HttpServlet{

@Override

protected void service(HttpServletRequest req, HttpServletResponse resp)

        throws ServletException, IOException {

    String input=req.getParameter("inputCode");

    String res="false";

    resp.setContentType("text/html; charset=utf-8");

    String trueCode=(String) req.getSession().getAttribute("trueCheckCode");

    if(input.equals(trueCode)){

        res="true";

    }

    PrintWriter writer = resp.getWriter();

    writer.write(res);

    writer.close();

    }

}

效果图：

点击看不进行验证码的刷新，注意并不是刷新整个页面，

1.有一个简单的刷新办法就是在看不清的href="show.jsp"但是这样是刷新了整个界面，很没有必要

2.有一个办法就是在点击看不清时让它不进行跳转而是执行js中的一个函数（我也是这么做的）

这一句让它执行js中reLoadImg()函数

<a href="javascript:reLoadImg()">看不清</a>

注意在改变动态图片的src时，后面必须加一个随机数，否则它会认为请求已经处理过了，所以这次请求无效（现象：不会刷新验证码）。

function reLoadImg(){

    document.getElementById("checkcodeId").innerHTML="";

    document.getElementById("d1").innerHTML="";

    document.getElementById("imageId").src="img.jsp?t="+(new Date().getTime());

}

格式2：

show.jsp

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

    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>验证码</title>

</head>

<script type="text/javascript">

function reLoadImg(){

    document.getElementById("i2").style.display="none";

    document.getElementById("checkcodeId").innerHTML="";

    document.getElementById("d1").innerHTML="";

    document.getElementById("imageId").src="img.jsp?t="+(new Date().getTime());

}

function check(){

    var ajax;

    var inputCode=document.getElementById("checkcodeId").value;

    //conlse.log(res);

    if(window.XMLHttpRequest){//火狐

        ajax= new XMLHttpRequest();

    }else if(window.ActiveXObject){//ie

        ajax=new ActiveXObject("Msxml2.XMLHTTP");

    }

    //queryString=queryString+"param=" + new Date().getTime();  

    ajax.onreadystatechange = function () {

        //判断ajax状态码

        if(ajax.readyState==4){

            //alert(5);

            //判断响应状态码（200、405、404、500）

            if(ajax.status==200){

                //获取响应内容（相应内容的格式）

                var res=ajax.responseText;

                //console.log(res[0]+" "+res[1]);

                //alert(11);

                //eval("var obj="+res);

                //console.log(res);

                document.getElementById("i2").src=res;

                document.getElementById("i2").style.display="inline";

                document.getElementById("i2").style.width=40+"px";

                document.getElementById("i2").style.height=40+"px";

            }

        }

    }

    ajax.open("get","check?inputCode="+inputCode);

    ajax.send(null);

}

</script>

<body>验证码：

<input type="text" size="4" name="checkcode" id="checkcodeId" onmouseout="check()">

  <img src="img.jsp" id="imageId"/>

  <a href="javascript:reLoadImg()">看不清</a>

   <img src="" id="i2">

</body>

</html>

img.jsp没变

Servlet

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/check")

public class checkOut extends HttpServlet{

@Override

protected void service(HttpServletRequest req, HttpServletResponse resp)

        throws ServletException, IOException {

    String input=req.getParameter("inputCode");

    String res="img/judge1.jpg";

    resp.setContentType("text/html; charset=utf-8");

    String trueCode=(String) req.getSession().getAttribute("trueCheckCode");

    if(input.equals(trueCode)){

        res="img/judge2.jpg";

    }

    PrintWriter writer = resp.getWriter();

    writer.write(res);

    writer.close();

    }

}

效果：输入验证码后当鼠标移出输入文本框（触发mouseout事件）后台返回图片地址图片是一个对勾和一个叉

点击看不清，判断图片消失

点击看不清后：

验证码校验(Ajax)的更多相关文章

Django 博客项目01 数据库设计与验证码校验+Ajax登录
数据库设计 from django.db import models from django.contrib.auth.models import AbstractUser class UserInf ...
AJAX应用【股票案例、验证码校验】
一.股票案例我们要做的是股票的案例,它能够无刷新地更新股票的数据.当鼠标移动到具体的股票中,它会显示具体的信息. 我们首先来看一下要做出来的效果: 1.1服务器端分析首先,从效果图我们可以看见很多 ...
简单的jQuery前端验证码校验
简单的jQuery前端验证码校验2 html; <!DOCTYPE html> <html lang="zh-cn"> <head> <m ...
springboot集成shiro实现验证码校验
github:https://github.com/peterowang/shiro/ 这里实现验证码校验的思路是自己添加一个Filter继承FormAuthenticationFilter,Form ...
jquery验证后ajax提交，返回消息怎样统一显示的问题
/* jquery验证后ajax提交.返回消息怎样跟jquery验证体系统一显示的问题,网上查了非常多资料.都没有找到明白的答案,通过数小时的尝试,最终攻克了,现举一个简单的样例,给须要的人參考參考吧 ...
Form表单利用Jquery Validate验证以及ajax提交
#表单利用Jquery验证验证以及ajax提交概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...
SpringBoot整合Shiro完成验证码校验
SpringBoot整合Shiro完成验证码校验上一篇:SpringBoot整合Shiro使用Redis作为缓存首先编写生成验证码的工具类 package club.qy.datao.utils; ...
JSP页面实现验证码校验
目录验证码校验分析生成验证码测试验证码校验验证码测试验证码校验添加验证码刷新在网页页面的使用中为防止"非人类"的大量操作和防止一些的信息冗余,增加验证码校验是许多网站 ...
利用Hutool-(Java工具类)实现验证码校验
目录 Hutool工具类介绍 Hutool实现验证码生成测试验证码生成其他样式的验证码第一篇是纯利用现有JDK提供的绘图类(ImageIO)类制作,这个过程比较复杂且需要了解ImageIO类. ...

随机推荐

vue中父组件向子组件传值问题
问题:当父组件传值给子组件echarts时,发现子组件获取的props为空,刚开始以为是钩子函数放错了地方,后来发现从mounted和created都不行.当在父组件data定义传递的数据的时候子组件 ...
关于Sublime如何配置C++环境的问题
前言传说sublime是全球最好的编辑器,可是只是编辑器啊!!!如果要运行,对于我们这些蒟蒻来说,不得不去使用DEV_C++.我们总是幻想能让sublime变成一个轻量级IDE,那该多好啊!!! 那 ...
计算几何-poj2451-HPI
This article is made by Jason-Cow.Welcome to reprint.But please post the article's address. 题意,求半平面交 ...
vue 实现上一周、下一周切换功能
效果图: html 显示部分: js 显示部分: preNextBtn(val){ let _this = this; this.tableList = []; //数据重置为空 _this.show ...
20200227英语上课笔记 about advantage and disadvantage
Hello and welcome to class! Remember to keep your microphone off when you are not speaking Pronuncia ...
.NET基础拾遗（1）类型语法基础和内存管理基础【转】
http://www.cnblogs.com/edisonchou/p/4787775.html Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理 (3)字符串 ...
Mysql与PostgreSql数据库学习笔记
mysql 从最基础的数据引擎,到进程结构,都不能支持数据版本.导致其职能阻塞“并发”,不支持最基本的事务,innodb达不到基本事务要求,任何写数据,都导致整个表锁住.充其量只能算是一个玩具,或者说 ...
java篇之继承
this代表正在使用类的对象(的引用) java支持重载:允许在同一个类中使用相同的方法名(重载类型只区分参数列表,包括参数顺序,参数个数,参数数据类型,与方法返回类型无关) 匹配: 方法名参数列 ...
洛谷 P5016 龙虎斗（模拟）
嗯... 题目链接:https://www.luogu.org/problem/P5016 这道题是一道模拟,不要考虑复杂,直接暴力枚举每一个点,看看加上s2之后两个势力的差值,找最小,记录下标. 注 ...
Python实现mysql数据库增删改查
利用python操作mysql数据库用法简单,环境配置容易,本文将实现对库增.删.改.查的简易封装! 1. 环境配置安装第三方包 ,导入模块 mysql.connector pip inst ...

验证码校验(Ajax)

验证码校验(Ajax)的更多相关文章

随机推荐

热门专题