Servlet生成JSP页面验证码-蒲公英云

1、JSP页面调用后台的Servlet页面来生成验证码

JSP页面部分代码，点击验证码图片能够刷新验证码：

function Refresh()
        {
            document.getElementById("ImgCode").src="servlet/ImgCodeServlet?now="+new Date();
        }
 <td>
                                <img id="ImgCode" title="点击更换验证码" style="width:80px;height: 27px;cursor:pointer;padding-left: 9px;padding-top: 0px" οnclick="Refresh()" alt="点击更换验证码" src="servlet/ImgCodeServlet"></img>
                            </td>

Servlet代码：

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
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;
public class ImgCodeServlet extends HttpServlet
{
    /**
     * 注释内容
     */
    private static final long serialVersionUID = 4596404497597968563L;
    /**
     * 设置图形验证码中字符串的字体和大小
     */
    private Font myFont = new Font("Arial Black", Font.PLAIN, 16);
    /**
     * <生成随机颜色>
     * <功能详细描述>
     * @param fc
     * @param bc
     * @return
     * @see [类、类#方法、类#成员]
     */
    Color getRandColor(int fc, int bc)
    {
        Random random = new Random();
        if (fc > 255)
        {
            fc = 255;
        }
        if (bc > 255)
        {
            bc = 255;
        }
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }
    @Override
    public void init()
        throws ServletException
    {
        super.init();
    }
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException
    {
        //阻止生成的页面内容被缓存，保证每次重新生成随机验证码
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        response.setContentType("image/jpeg");
        //指定生成图形验证码图片的大小
        int width = 80, height = 27;
        //生成一张新图片
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        //在图片中绘制内容
        Graphics g = image.getGraphics();
        Random random = new Random();
        g.setColor(getRandColor(200, 250));
        g.fillRect(1, 1, width - 1, height - 1);
        g.setColor(new Color(102, 102, 102));
        g.drawRect(0, 0, width - 1, height - 1);
        g.setFont(myFont);
        //随机生成线条，让图片看起来更加杂乱
        g.setColor(getRandColor(160, 200));
        for (int i = 0; i < 155; i++)
        {
            int x = random.nextInt(width - 1);// 起点的x坐标  
            int y = random.nextInt(height - 1);// 起点的y坐标  
            int x1 = random.nextInt(6) + 1;// x轴偏移量  
            int y1 = random.nextInt(12) + 1;// y轴偏移量  
            g.drawLine(x, y, x + x1, y + y1);
        }
        // 随机生成线条，让图片看起来更加杂乱  
        for (int i = 0; i < 70; i++)
        {
            int x = random.nextInt(width - 1);
            int y = random.nextInt(height - 1);
            int x1 = random.nextInt(12) + 1;
            int y1 = random.nextInt(6) + 1;
            g.drawLine(x, y, x - x1, y - y1);
        }
        //该变量用来保存随机字符
        String sRand = "";
        for (int i = 0; i < 4; i++)
        {
            String temp = getRandomChar();
            sRand += temp;
            //将系统生成的随机字符添加到图形验证码上
            g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
            g.drawString(temp, 15 * i + 10, 15);
        }
        HttpSession session = request.getSession(true);
        session.setAttribute("rand", sRand);
        g.dispose();
        ImageIO.write(image, "JPEG", response.getOutputStream());
    }
    /**
     * <生成一个随机字符>
     * <功能详细描述>
     * @return
     * @see [类、类#方法、类#成员]
     */
    private String getRandomChar()
    {
        //将0～2的小数四舍五入生成整数
        int rand = (int)Math.round(Math.random() * 2);
        long itmp = 0;
        char ctmp = '\u0000';
        switch (rand)
        {
        //生成大写字母
            case 1:
                itmp = Math.round(Math.random() * 25 + 65);
                ctmp = (char)itmp;
                return String.valueOf(ctmp);
                //生成小写字母
            case 2:
                itmp = Math.round(Math.random() * 25 + 97);
                ctmp = (char)itmp;
                return String.valueOf(ctmp);
                //生成数字
            default:
                itmp = Math.round(Math.random() * 9);
                return String.valueOf(itmp);
        }
    }
}

Servlet配置：

<servlet>
    <servlet-name>ImgCodeServlet</servlet-name>
    <servlet-class>com.query.ImgCodeServlet</servlet-class>
  </servlet>
<servlet-mapping>
    <servlet-name>ImgCodeServlet</servlet-name>
    <url-pattern>/servlet/ImgCodeServlet</url-pattern>
  </servlet-mapping>

2、登录的Action中来利用Ajax校验用户名、密码、验证码

Action校验：

public String checkAjaxLogin()
    {
        Map session = ActionContext.getContext().getSession();
        String identifyCode = (String)session.get("rand");
        if (identifyCode.toUpperCase().equals(code.toUpperCase()))
        {
            if (!"admin".equals(userName))
            {
                //用户名不存在
                message = "userName_Error";
            }
            else if (!"admin".equals(passWord))
            {
                //用户名或密码错误
                message = "userNameandPassWord_Error";
            }
            else
            {
                message = "success";
            }
        }
        else
        {
            //验证码错误
            message = "code_error";
        }
        return SUCCESS;
    }

Action配置：

<package name="jqueryAjax-doo" extends="json-default">
            <action name="queryAjaxLogin" class="com.actions.query.UseQueryAction" method="checkAjaxLogin">
              <result type="json">
                   <param name="root">message</param>
                   <param name="noCache">true</param>          
              </result>
            </action>
    </package>

登录事件的Ajax验证：

$.ajax({
                type:"post",
                url:"queryAjaxLogin.action",
                data:{"userName":userName,"passWord":passWord,"code":code},
                success:function(data)
                {
                    if(data=="code_error")
                    {
                        alert("验证码错误。");
                    }
                    else if(data=="userName_Error")
                    {
                        alert("用户名不存在。");
                    }
                    else if(data=="userNameandPassWord_Error")
                    {
                        alert("用户名或密码错误。");
                    }
                    else
                    {
                        window.location="Login.action";
                    }
                }