1.先写一个页面,写一个表单
form.jsp
<!--1.写表单,其中包含图片(验证码)
2.让图片显示出来:
把<img>的src指向verifycodeservlet,需要在web.xml中部署
3. 换一张
-->
<form action="/tools/LoginServlet" method="post">
<!-- 添加一个参数:method=login -->
<input type="hidden" name="method" value="login"/>
用户名:<input type="text" name="name"/><br/>
密 码:<input type="password" name="pwd"/><br/>
验证码:<input type="text" name="verifyCode"/>
<img id="imgcode" src="/tools/VerifyCodeServlet"/>
<a href="javascript:huan()">换一张</a>
<br/>
<input type="submit" value="提交"/>
</form>
2.配置web.xml
<!-- 验证码 --> <servlet> <servlet-name>VerifyCodeServlet</servlet-name> <servlet-class>cn.itcast.vcode.servlet.VerifyCodeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>VerifyCodeServlet</servlet-name> <url-pattern>/VerifyCodeServlet</url-pattern> </servlet-mapping>
3.添加无刷新换一张
<script type="text/javascript"> function huan(){ //获取这个元素 //将他的src指向为/tools/VerifyCodeServlet var img = document.getElementById("imgcode"); //需要给出一个参数,这个参数每次都不同,才可以避过浏览器的缓存:a img.src="/tools/VerifyCodeServlet?a="+new Date().getTime(); } </script>
4.校验验证码
创建LoginServlet.java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.itcast.servlet.BaseServlet;
public class LoginServlet extends BaseServlet {
public String login(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
//校验验证码,先要获取表单,获取图片上的文字
String ver = request.getParameter("verifyCode");
//真正的验证码保存在session
String vcode = (String) request.getSession().getAttribute("vCode");
System.out.println(ver.equalsIgnoreCase(vcode));//不区分大小写的比较
return null;
}
}