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

随机推荐

arcgis字段计算器
arcgis字段计算器一.VB脚本 1.取某字段前几位或者后几位 ) ) 2.合并字段,中间加符号 Dim a if [ZDDM2] ="" Then a= [ZDDM1] el ...
对C#面向对象三大特性的一点总结
一.三大特性封装: 把客观事物封装成类,并把类内部的实现隐藏,以保证数据的完整性继承:通过继承可以复用父类的代码多态:允许将子对象赋值给父对象的一种能力二.[封装]特性把类内部的数据隐藏,不 ...
【做题笔记】P1330 封锁阳光大学
读题易得:对于有边的两个点 \(u,v\) ,能且仅能其中一点对这条边进行封锁. 什么意思呢?假设给这张图上的点进行染色,那么对于上述的两个点 \(u,v\) ,\(u,v\) 必须异色(理解这一点很 ...
【想见你】剧情解析byZlc
花两天时间刷完了想见你,精神有点恍惚. 要是刷题也能有这个尽头就好了... 下面给大家带来个人的剧(hu)情(bian)解(luan)析(zao) 穿越条件:一台老式随身听,一首last dance, ...
201771010135-杨蓉庆实验一软件工程准备—用Markdown写构建之法
项目内容软件工程 https://www.cnblogs.com/nwnu-daizh 博客园 https://www.cnblogs.com/nwnu-daizh/p/12369881.h ...
Bug搬运工-CSCvg37458：ISR4K goes into booting loop with "flash:" in boot statement
ISR4K升级的时候要注意了! 很可能会碰到如下的问题: ISR4K goes into booting loop with "flash:" in boot statement ...
Bug搬运工-CSCux99539：Intermittent error message "Power supply 2 failed or shutdown"
Description Symptom:Following error messages will be seen intermittently.%PFMA-2-PS_FAIL: Power supp ...
Go文件拷贝
package main import ( "os" "io" "fmt" "io/ioutil" ) func mai ...
pwnable.kr-flag-Writeup
MarkdownPad Document *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...
Python3问题TypeError: object() takes no parameters
1. Python中关键字变量和特殊函数,都是以__xxx__来表示的初学Python的朋友,需要注意其中变量名中前后是有两个下划线(_)的,如果不注意,调用内部关键字变量和特殊函数时,将会出现错误 ...

验证码校验(Ajax)

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

随机推荐

热门专题