验证码校验(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类. ...

随机推荐

工厂方法模式(JAVA反射)
简单工厂模式的不足在简单工厂模式中,只提供了一个工厂类,该工厂类处于对产品类进行实例化的中心位置,它知道每一个产品对象的创建细节,并决定何时实例化哪一个产品类.简单工厂模式最大的缺点是当有新 ...
CDH安装时，无法纳管全部的节点的一个bug
问题描述: 使用CDH 5.2版本安装时,agent节点有12个.按照安装说明,在各个节点启动cm-agent之后,发现只有6个节点能被纳管.其它的节点总是无法加入纳管中. 在确认防火墙已经关闭后 ...
Linux tasklet 和workqueue学习
中断服务程序一般都是在中断请求关闭的条件下执行的,以避免嵌套而使中断控制复杂化.但是,中断是一个随机事件,它随时会到来,如果关中断的时间太长,CPU就不能及时响应其他的中断请求,从而造成中断的丢失.因 ...
Yii2 的 updateAll 方法参数详解
Yii2 中的 updateAll() 可以接受三个参数,$attributes, $condition, $params = null 第一个参数是要更新的值,第二个是条件,如果第二个条件中用了占位 ...
CentOS7重启和关机
重启命令: 1.reboot 2.shutdown -r now 立刻重启(root用户使用) 3.shutdown -r 10 过10分钟自动重启(root用户使用) 4.shutdown -r 2 ...
如何用纯代码实现图片CSS3
在刷面试题的时候刷到2015阿里巴巴的,如何用代码实现下面的图形. <div class="main"> <h1>图片图标-一个标签实现</h1> ...
python:面试算法题
''' 1.买卖股票的最佳时机给定一个数组,它的第?i?个元素是一支给定股票第?i?天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意你不 ...
STM32程序中 \r \n \r\n
1.用串口调试助手打印信息,程序换行时,最好还是用\r\n,光用\r或光用\n可能达不到换行的效果.
utf-8无bom格式编码
BOM——Byte Order Mark,就是字节序标记在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符,它的编码是FEFF.而FFFE在U ...
jmeter beanshell 使用参数引用
1.直接使用beanshell 写代码引用: 2. beanshell 引用.java 文件 3.beanshell 引用jar 包

验证码校验(Ajax)

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

随机推荐

热门专题