生成验证码的Servlet
public class ImageCodeServlet extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
//req.setCharacterEncoding("utf-8");
//res.setContentType("text/html;charset=utf-8");
// 设置http响应的文件MIME类型为图片
res.setContentType("image/jpeg");
// 不让浏览器记录此图片的缓存
res.setDateHeader("expries", -1);
res.setHeader("Cache-Control", "no-cache");
res.setHeader("Pragma", "no-cache");
// 这里调用了一个工具类VerifyCodeUtils来生成指定位数(也可指定内容)的验证码字符串
String verifyCode = VerifyCodeUtils.generateVerifyCode(5);
// 将生成验证码字符串保存到session域中,方面进行表单验证
req.getSession().setAttribute("verifyCode", verifyCode);
// 生成图片并写到响应输出流里. 因为register.jsp页面里的验证码图片宽高分别为180,30.这里使保持一致
VerifyCodeUtils.outputImage(180, 30, res.getOutputStream(), verifyCode);
}
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
doGet(req, res);
}
}
注册页面的使用
<script type="text/javascript">
function changeImage() {
document.getElementById("img").src = "ImageCodeServlet?time="
+ new Date().getTime();
}
function validate(){
var code=$("#ckcode").val();
if(code==null||code==""){
$("#codeDiv").html("<font style='color:red'>验证码不能为空</font>");
}else{
$.getJSON('register',{code:code},function d(data){
$("#codeDiv").html(data.msg);
});
}
}
</script>
<!-- 验证码 -->
<div class="checkimg">
<h4>注册校验</h4><br>
<table width="100%" border="0" cellspacing="1" class="upline">
<tr>
<td style="text-align: left; width: 40%">输入校验码:</td>
<td style="width: 60%"><input type="text" style="border:1px solid black; height:25px"
name="ckcode" id="ckcode" onblur="validate()" /></td>
</tr>
<tr>
<td style="text-align: right; width: 20%;"> </td>
<td colspan="2" style="width: 90%"><img
src="ImageCodeServlet" width="180"
height="30" id="img" />
<a href="javascript:void(0);" onclick="changeImage()">换一张</a>
</td>
</tr>
<tr><td><span id="codeDiv"></span></td></tr>
</table>
</div>
JSON传给RegisterServlet,从session中取出验证码与输入的参数进行比较
String code=request.getParameter("code");
String c=(String) request.getSession().getAttribute("verifyCode");
if(c.equals(code)) {
out.print("{\"flag\":\"true\",\"msg\":\"<font style='color:green'>验证码正确</font>\"}");
}else {
out.print("{\"flag\":\"false\",\"msg\":\"<font style='color:red'>验证码错误</font>\"}");
}