登录页面添加图形验证码功能

之前前辈写的登录表单还是提交到同一个页面，前端直接读取用户输入的验证码与session并不同步，所以使用ajax将用户输入传递到后台进行验证，这样也更安全。

生成验证码validatecode.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.Random"%>
<%@ page import="java.io.OutputStream"%>
<%@ page import="java.awt.Color"%>
<%@ page import="java.awt.Font"%>
<%@ page import="java.awt.Graphics"%>
<%@ page import="java.awt.image.BufferedImage"%>
<%@ page import="javax.imageio.ImageIO"%>
<%
    //设置页面不缓存
    response.setHeader("Pragma","no-cache");
    response.setHeader("Cache-Control","no-catch");
    response.setDateHeader("Expires",0);

    int width = 80;
    int height = 32;
    //create the image
    BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    Graphics g = image.getGraphics();
    // set the background color
    g.setColor(new Color(0xDCDCDC));
    g.fillRect(0, 0, width, height);
    // draw the border
    g.setColor(Color.black);
    g.drawRect(0, 0, width - 1, height - 1);
    // create a random instance to generate the codes
    Random rdm = new Random();
    String hash1 = Integer.toHexString(rdm.nextInt());
    //System.out.print(hash1);
    // make some confusion
    for (int i = 0; i < 50; i++) {
   
        int x = rdm.nextInt(width);
        int y = rdm.nextInt(height);
        g.drawOval(x, y, 0, 0);
    }
    // generate a random code
    String capstr = hash1.substring(0, 4);
    session.setAttribute("key"