JSP+Servlet实现验证码生成

主要利用JSP+Servlet实现验证码生成

利用JQuery的ajax技术实现异步更换图片地址

BufferedImage实现验证码图片的生成

Servlet代码：

package Register;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.Random;


import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;



/**
 * Servlet implementation class GetCode
*/
public class GetCode extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
     * @see HttpServlet#HttpServlet()
*/
public GetCode() {
        super();
// TODO Auto-generated constructor stub
    }

/**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
        BufferedImage img = new BufferedImage(100,30,BufferedImage.TYPE_INT_ARGB_PRE);
        Graphics g =img.getGraphics();
        g.setColor(Color.gray);                      
        g.fillRect(0, 0, 80, 30);　　　　　　　　//画验证码背景
        g.setColor(Color.white);
        g.setFont(new Font("宋体",Font.BOLD,30));    
        Random rand = new Random();
        String code = "";
for(int i=0;i<4;i++){                       //随机生成4位数字验证码
            code += rand.nextInt(10);
        }
        g.drawString(code, 5, 25);
        ImageIO.write(img, "png", new File("d:/"+code+".png"));            //生成验证码图片
        response.getWriter().println(code);                 //验证码返回前台
    }

/**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
        doGet(request,response);
    }

}

前台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>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var code;
    $.ajax({                                 //接收验证码
        url:"GetCode",
        type:"POST",
        success:function(data, textStatus){
                code =$.trim(data);
                $("img").attr({ src:"d:/"+code+".png"});            //改变验证码地址
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){

    }
    });


    $("#img").click(function(){                //img标签绑定点击事件，点击更换图片
        $.ajax({
            url:"GetCode",
            type:"POST",
            success:function(data, textStatus){
                    code =$.trim(data);
                    $("img").attr({ src:"d:/"+code+".png"});
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){

        }
        });
    });

    $("#code").blur(function(){                  //判断输入的验证码和生成的是否一致
if($("#code").val()!=code){
            $("#code").css("background-color","#F00");
        }
else{
            $("#code").css("background-color","#0f0");
        }

    });

});
</script>
</head>
<body>
    <form action="#">
        帐&nbsp;&nbsp;&nbsp;&nbsp;号<input type="text" name="username" id="username" /><br><br>
        密&nbsp;&nbsp;&nbsp;&nbsp;码<input type="password" name="password" id="password" /><br><br>
        验证码<input type="text" name="code" id="code" /><img id="img"  src="#"><br><br>    
        <input type="submit" value="注册">
    </form>
</body>
</html>

秒客网

JSP+Servlet实现验证码生成

相关文章