验证码生成+局部刷新

​

 验证码生成

​编辑

验证码的生成大致思路主要是随机生成字符串将其存入session；然后使用BufferedImage和Graphics类把其转为图片，，增加一些难度就是加一些干扰线，然后再将这些随机字符串以图片的形式输出。并且实现其局部刷新（当点击换一张时，重新产生新的字符串）

1.jsp代码

	            <div class="form-group">
						<label for="date" class="col-sm-2 control-label">验证码</label>
							<div class="col-sm-3">
								<input type="text" class="form-control">
							</div>
							 <div class="col-sm-2">
							<img id="identifyingValue" alt="验证码" src="${pageContext.request.contextPath }/User?method=check" style="position: absolute; top: 0px; right: 26px;"><!-- 内部自动发送请求，加载验证码 -->
							</div> 
						    <div class="col-sm-2">
						        <a class="blurry" id="newPic" onclick="getPic();"style="position: absolute;top: 5px;left: 20px">换一张</a>
						    </div>
					</div>

解释一下src="${pageContext.request.contextPath }/User?method=check"  是抽取的servlet方法

 onclick="getPic();当点击换一张时，我们设置了一个函数，其代码如下：

js代码：

<script type="text/javascript">
   function getPic(){
	   $("#identifyingValue").attr("src","${pageContext.request.contextPath }/User?method=check&flag="+Math.random());
   }
 
</script>

其实局部刷新的原理就在&flag="+Math.random());此处 

3,产生验证码代码

public void check(HttpServletRequest request, HttpServletResponse response) throws IOException {
		Long time = System.currentTimeMillis();
		// 通知浏览器不要缓存
		response.setHeader("Content-type", "text/html;charset=UTF-8");
		response.setHeader("Expires", "-1");
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Pragma", "-1");
		response.setDateHeader("Last-Modified", time);
		response.setDateHeader("Date", time);
		response.setDateHeader("Expires", 0);

		int height = 33;
		int width = 90;
		// 1.创建图片--- 得到一个内存图像BufferedImage
		BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		// 2.得到一个画笔
		Graphics g = img.getGraphics();
		// 画边框drawRect绘制指定矩形的边框。
		g.drawRect(0, 0, width, height);
		// 填充颜色
		g.setColor(Color.pink);
		g.fillRect(1, 1, width - 2, height - 2);
		// 画干扰线
		g.setColor(Color.yellow);
		Random r = new Random();
		for (int i = 0; i < 15; i++)
			g.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width), r.nextInt(height));
		// 生成随机数字
		g.setColor(Color.blue);
		g.setFont(new Font("微软雅黑", Font.BOLD | Font.ITALIC, 20));// BOLD加粗，ITALIC斜体
		int d = 15;
		StringBuffer sb = new StringBuffer();// 可变字符串的利用
		for (int j = 0; j < 4; j++) {
			String code = r.nextInt(10) + "";
			sb.append(code);
			g.drawString(code + "", d, 20);
			d += 20;
		}
		// 将验证码输入到session中，用来验证
		request.getSession().setAttribute("checkcode", sb.toString());
		// 输出打web页面
		ImageIO.write(img, "jpg", response.getOutputStream());
	}

	public void activeEmail(HttpServletRequest request, HttpServletResponse response) throws IOException {
		// 获得激活码
		String activeCode = request.getParameter("activeCode");

		UserService service = new UserService();
		boolean activeIsOk = service.active(activeCode);
		// User user = new User();
		// int state = user.getState();
		// String state = request.getParameter("state");
		// System.out.println(state);
		if (activeIsOk) {
			// 激活成功跳转到邮件激活成页面
			response.sendRedirect(request.getContextPath() + "/activeSuccess.jsp");
		} else {
			response.sendRedirect(request.getContextPath() + "/registerFail.jsp");
		}

	}

​