这个方法直接生成验证码 前台只需要把地址写对就能直接用,可以当作工具类用,不需要访问 页面加载完成就可以了
package www.sshblank.util;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
import javax.imageio.ImageIO;
public class ImageUtil {
private static final int WIDTH = 130;
private static final int HEIGHT = 30;
public static String outPutImage(OutputStream om) throws IOException {
//创建一幅图片
BufferedImage image=new BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
//得到gracphics对象
Graphics g=image.getGraphics();
//设置背景
g.setColor(Color.red);
g.setClip(0, 0, WIDTH, HEIGHT);
//设置边框
g.setColor(Color.blue);
g.setClip(1, 1, WIDTH-2, HEIGHT-2);
//向图片化干扰线
for(int i=0;i<8;i++){
g.setColor(Color.gray);
int x1=new Random().nextInt(WIDTH);
int x2=new Random().nextInt(HEIGHT);
int y1=new Random().nextInt(HEIGHT);
int y2=new Random().nextInt(WIDTH);
g.drawLine(x1, y1, x2, y2);
}
//向图片输出验证码
String base="0123456789abcdefghijklmnopqrstuvwxyz";
StringBuffer str=new StringBuffer();
for(int i=0;i<4;i++){
int ran=new Random().nextInt(base.length()-1);
str.append(base.charAt(ran));
}
g.setColor(Color.green);
g.setFont(new Font("宋体",Font.PLAIN,20));
//旋转
Graphics2D gg=(Graphics2D)g;
gg.rotate(0.05);
g.drawString(str.toString(), 10, 20);
//发送到客户端
ImageIO.write(image, "jpeg", om);
return str.toString();
}
}
html
我用的是jquery Easyui 的验证框,你也可以用普通的验证
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<LINK rel="stylesheet" href="${pageContext.request.contextPath}/css/common/login.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js" ></script>
<script type="text/javascript">
function login(){
//获取用户名
var userName = $('#name').val();
//获取密码
var password = $('#password').val();
//获取验证码
var kaptchaCode = $('#check').val();
if(userName!=null&&userName!=""&&userName!=undefined){
if(password!=null&&password!=""&&password!=undefined){
if(kaptchaCode!=null&&kaptchaCode!=""&&kaptchaCode!=undefined){
$.ajax({
type : "post",
dataType :"json",
data : $("#form").serialize(),
url : "${pageContext.request.contextPath}/school/login",
success : function(data) {
if (data.success) {
window.location.href = "${pageContext.request.contextPath}/school/pass";
} else {
$("#error").text(data.msg);
}
},
error : function() {
$("#error").text('服务器开小差,赶紧联系管理员!');
}
});
}else{
$("#error").text("验证码不能为空");
}
}else{
$("#error").text("密码不能为空");
}
}else{
$("#error").text("用户名不能为空");
}
};
$(function(){
$("#huan").click(
function(){
// 生成验证码
$(this).hide().attr('src', '${pageContext.request.contextPath }/code+?ran=" + Math.random();
});
<span style="color:#ff0000;"> 注意<span style="font-family:Helvetica, Tahoma, Arial, sans-serif;line-height: 25px;">假如url相同的话,浏览器会从本地缓存先读 取,那么这样就刷新及木有用处</span></span><span style="font-family:Helvetica, Tahoma, Arial, sans-serif;line-height: 25px;"><span style="color:#ff0000;"> 而加了随机数相当于每次url都不相同,会从服务器重新 取得。
url就是你生成验证码的那个类
</span></span> //设置焦点
$("#name,#password,#check").focus(
function(){
$("#error").text('');
});
});
</script>
</head>
<body>
<div class="container">
<div class="heading">
<img class="logo" src="images/login/logo.png" />
<span>学校管理平台</span>
</div>
<div class="main">
<div class="left">
<img class="login_bg" src="images/login/login_bg_02.png" />
</div>
<div class="right">
<form id="form">
<div class="login">
<div>用户登录</div>
<dl>
<dt>用户名</dt>
<dd>
<input type="text" id="name" name="userName" maxlength="16">
</dd>
</dl>
<dl>
<dt>密 码</dt>
<dd>
<input type="password" id="password" name="password" maxlength="16">
</dd>
</dl>
<dl>
<dt>验证码</dt>
<dd style="width: 120px;">
<input type="text" id="check" name="check" maxlength="16" style="width: 100px;">
</dd>
<dd style="width: 120px;">
<div class="kaptchaImg">
<img src="${pageContext.request.contextPath }/code" id="huan" style="width: 140px;height: 30px"/>
</div>
</dd>
</dl>
<!--<dl>
<dd>
<div class="kaptchaImg">
<img src="${pageContext.request.contextPath}/CaptchaImageCreateController/captcha-image" id="kaptchaImage" style="width: 200px;height: 30px"/>
</div>
</dd>
</dl>-->
<div class="login_btn">
<input type="button" name="imageField" id="imageField" style="background:#F90;width: 350px;height: 40px;" value="登 录" οnclick="login()" />
</div>
<div>
<font color="red" id="error"></font>
</div>
</div>
</form>
</div>
</div>
<div class="footer">
<a href="${pageContext.request.contextPath}/school/teacherLogin">教师登陆</a>
</div>
</div>
</body>
</html>
注意假如url相同的话,浏览器会从本地缓存先读 取,那么这样就刷新及木有用处 而加了随机数相当于每次url都不相同,会从服务器重新 取得。