1.先上效果图
2.前端页面
<div class="loginInfo-input">
<input type="text" name="" id="identifyCode2" style="width: 75px;" autocomplete="off" placeholder=""/>
<img src="<%=path%>/jcaptcha.jpg" style="border-radius: 3px;margin-top: -4px;" alt="验证码" id="safecode2" />
<a href="javascript:reloadCode2();" style="font-size: 10px;text-decoration: underline;">看不清楚</a>
</div>
<script>
// 换一张验证码
function reloadCode2(){
var time = new Date();
// 给URL传递参数可以清空浏览器的缓存,让浏览器认为这是一个新的请求
document.getElementById('safecode2').src = '<%=path%>/jcaptcha.jpg?d=' + time;
}
</script>
注意:<img>标签的src属性发起请求;
3.web.xml配置servlet处理HTTP请求
<!-- 生成验证码 -->
<servlet>
<servlet-name>imageServlet</servlet-name>
<servlet-class>
com.servlet.ImageServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>imageServlet</servlet-name>
<url-pattern>/jcaptcha.jpg</url-pattern>
</servlet-mapping>
4.创建ImageServlet.java类
public class ImageServlet extends HttpServlet {
private static char[] chs = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
.toCharArray();
private static final int NUMBER_OF_CHS = 4;
private static final int IMG_WIDTH = 65;
private static final int IMG_HEIGHT = 30;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
BufferedImage image = new BufferedImage(IMG_WIDTH, IMG_HEIGHT,
BufferedImage.TYPE_INT_RGB); // 实例化BufferedImage
Graphics g = image.getGraphics();
Color c = new Color(200, 200, 255); // 验证码图片的背景颜色
g.setColor(c);
g.fillRect(0, 0, IMG_WIDTH, IMG_HEIGHT); // 图片的边框
StringBuffer sb = new StringBuffer(); // 用于保存验证码字符串
int index; // 数组的下标
Random random = new Random();
Font font = new Font("Fixedsys", Font.BOLD, 20);
// 随机产生30条干扰线,使图象中的认证码不易被其它程序探测到。
g.setColor(Color.BLACK);
for (int i = 0; i < 30; i++) {
int x = random.nextInt(IMG_WIDTH);
int y = random.nextInt(IMG_HEIGHT);
int xl = random.nextInt(15);
int yl = random.nextInt(15);
g.drawLine(x, y, x + xl, y + yl);
}
for (int i = 0; i < NUMBER_OF_CHS; i++) {
index = random.nextInt(chs.length); // 随机一个下标
g.setFont(font);
g.setColor(new Color(random.nextInt(88), random.nextInt(210), random.nextInt(150))); // 随机一个颜色
g.drawString(chs[index] + "", 15 * i + 3, 18); // 画出字符
sb.append(chs[index]); // 验证码字符串
}
request.getSession().setAttribute("piccode", sb.toString()); // 将验证码字符串保存到session中
ImageIO.write(image, "jpg", response.getOutputStream()); // 向页面输出图像
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
5.验证码是否输入成功验证(我这是struts2的ajax验证)
/**
* 验证码是否正确
* @author jq.Li
* @date Nov 19, 20184:54:37 PM
*
* @return
*/
public String ValidateImage() {
Map<String,Object> map = new HashMap<String,Object>();
String picString = (String)this.getRequest().getSession().getAttribute("piccode");
if(picString!=null&&identifyCode!=null&& identifyCode.toUpperCase().equals(picString.toUpperCase())){
map.put("flag", "success");
}else{
map.put("flag", "fail");
}
JSONObject json = JSONObject.fromObject(map);//将map对象转换成json类型数据
result = json.toString();//给result赋值,传递给页面
return "success";
}
注:我贴出struts的xml配置方法请求代码(struts整合ajax自行百度处理)
<!-- ajax -->
<action name="ValidateImage" class="loginAction" method="ValidateImage">
<result type="json">
<param name="root">result</param>
<!-- result是action中设置的变量名,也是页面需要返回的数据,
该变量必须有setter和getter方法 -->
</result>
<result name="fail"></result>
</action>