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

随机推荐

JS高级---复习
复习面向过程和面向对象都是编程的思想, 方式不一样面向过程: 凡事都是亲力亲为, 所有的代码都要自己写, 每一步都要很清楚, 注重的是过程面向对象: 执行者成为指挥者, 只要找对象, 然后让对象 ...
Form DataGridView绑定BindingSource的几种方式
本文链接:https://blog.csdn.net/qq_15138169/article/details/83341076 在WinForm的开发中,ListView和DataGridView应用 ...
hadoop3 配置second name node
设置hdfs-site.xml <property> <name>dfs.http.address</name> <value>192.168.1.81 ...
Java进阶学习（5）之设计原则(下)
框架加数据把数据的硬编码尽可能解成框架加数据的结构城堡游戏修改后的代码 Room类 package com.castle; import java.util.HashMap; public cla ...
有源汇有上下界最大流（ZQU1591)
题意:现在的网络有一个源点s和汇点t,求出一个流使得源点的总流出量等于汇点的总流入量,其他的点满足流量守恒,而且每条边的流量满足上界和下界限制. 思路:要满足每一个点的流量守恒,我们可以尝试像无源汇上 ...
linux建立动态库的软链接
复制动态库: /home/wmz/anaconda3/lib/ 删除原链接: 建立新链接: /home/wmz/anaconda3/lib/libstdc++.so. 问题的起源是,安装anacond ...
Good Bye 2019E（点坐标缩小一半以区分奇偶性）
设某个点的坐标为(x,y),根据坐标奇偶性公可分为四类,0表示偶数,1表示奇数,(0,0),(0,1),(1,0),(1,1). 如果所有点的坐标都属于一类,那么它们之间的距离都是4的倍数,无法分辨. ...
NOIP-- 模拟-----机器
机器翻译题目描述小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...
Spring_002 依赖注入方式实现
继续写我们的第一个Spring程序,这次我们使用依赖注入的方式实现程序第一步,建立我们的Spring_002程序,并在程序中添加BookDao.java.BookDaoImpl.java.BookS ...
炸鱼w咕咕咕
退役选手又回来了w + 将近一个月莫有学OI变得十分笨拙 + 洛谷打卡从300+ 变为 10 + 冬令营加油(虽然我会崩 + 省选加油 (虽然我进不去

验证码校验(Ajax)

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

随机推荐

热门专题