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

随机推荐

web前端-基础篇
该篇仅是本人学习前端时,做的备忘笔记: 一.背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小 ...
centos长ping输出日志的脚本
为监控某服务器的网络情况,制作一个sh脚本,记录ping的长过程,并输出日志以备观察. 1.脚本如下 cat /home/summer/ping100.sh #!/bin/sh ping 172.16 ...
vue axios使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
C语言程序设计（三）——顺序程序设计
目录: 常量.c 常量分类: (1)字面常量(直接常量):数值常量(分为整型常量和浮点型常量).字符串常量和字符常量 (2)符号常量 (3)常变量 \f,换页,将当前位置移到下一页的开头 \v,垂 ...
Python - CentOS 下用 yum 安装 pip
1. 概述 python 安装完成发现后续需要一个 python 自己的包管理工具书上说默认会装, 然后我发现还是没有命令执行的结果我就不给了, 这个判断起来, 应该是没有太大难度的 2. 环 ...
使用docker容器时遇到的2个问题
最近项目在centOS7服务器上用docker部署了几个服务,在运行的时候发现,总是过一段时间,容器内的根目录就变为只读而无法写入了. 经过调查都是因为docker/devicemapper/devi ...
避免重复数据查询DISTINCT
[1]避免重复——DISTINCT SELECT DISTINCT job FROM t_enployee; #去除job字段的重复项,只显示所有job字段中的非重复项,比如job里有:te ...
题解 P4568 【[JLOI2011]飞行路线】
P4568 [JLOI2011]飞行路线分层图模板题,相似的题还有P4822 [BJWC2012]冻结,P2939 [USACO09FEB]改造路Revamping Trails,其实做惯了也就不难 ...
攻防世界你知道什么是cookie吗？
打开题目链接,提示我们查看cookie,cookie是HTTP协议中的一个重要参数,(对HTTP协议不是很熟悉的friends可以看看这个“HTTP协议其实就是这么简单”) 查看cookie的方法有很 ...
aria2连接网站出现handshake failure问题的分析与解决方法
aria2是一款轻量级的,支持多协议,跨平台的命令行下载工具,是笔者目前在使用的下载工具,结合uget使用基本上能媲美window下的迅雷工具.在笔者使用过程中,遇到了aria2连接部分网站时出现ha ...

验证码校验(Ajax)

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

随机推荐

热门专题