public final static int WIDTH=100;
public final static int HEIGHT=40;
public final static int LINENUM=10;
public final static String vercations="0123456789ABCDEFGHIJKLMNOPQSTUVWXYZabcdefghijklmnopqrstuvwxyz";
public static Random ran = new Random();
public static void getVerfication(HttpServletRequest request,HttpServletResponse response){
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
//设置image的背景色
setBackGroung(g);
//设置边框
setBorder(g);
//设置随机的干扰线
setLine(g);
//这里是得到验证码,用了session吧验证码放进去,方便后面取它
String verfication = setNumber(g);
request.getSession().setAttribute("verfications", verfication);
//这里运用流,吧它给写进去,对了,这个类不需要返回值哦。BufferedImage 是一个直接涉及到内存的类。
try {
response.setContentType("imag/jpeg");
ImageIO.write(image, "jpg",response.getOutputStream());
} catch (IOException e) {
e.printStackTrace();
}
}
private static void setBackGroung(Graphics g) {
g.setColor(Color.black);
g.fillRect(0, 0, WIDTH,HEIGHT);
}
private static void setBorder(Graphics g) {
}
private static void setLine(Graphics g) {
g.setColor(Color.cyan);
for(int i=0;i<LINENUM;i++){
int x1=ran.nextInt(WIDTH);
int y1=ran.nextInt(HEIGHT);
g.drawLine(x1, y1, x1+ran.nextInt(60), y1+ran.nextInt(75));
}
}
private static String setNumber(Graphics g) {
int x=5;
String number=new String("");
g.setFont(new Font("宋体", Font.BOLD, 30));
for(int i=0;i<4;i++){
// g.setColor(new Color(ran.nextInt(255),ran.nextInt(255),ran.nextInt(255)));使验证码取随机的颜色
g.setColor(new Color(ran.nextInt(255),ran.nextInt(255),ran.nextInt(255)));
char s = vercations.charAt(ran.nextInt(vercations.length()));number+=s+"";
g.drawString(s+"", x, 30);
x+=20;
}
return number;
}
}
下面还有取验证码和验证码的相关判断。这里用到springMVC框架
@RequestMapping(value="/verfication.htm",method = RequestMethod.GET)
public void getVerfication(Model model,HttpServletRequest request,
HttpServletResponse response){
verfication.getVerfication(request, response);
}
action,页面的第一次请求。
<img alt="找不到图" src="message/verfication.html" id="verfication" οnclick="dianji()"><a>看不清,点击图片换一张</a>
<input type="text" id="vs"/>
<button οnclick="tijiao()">验证</button>
<font id="fonts">11</font>
<script type="text/javascript">
function dianji(){
document.getElementById("verfication").src= "message/verfication.html?rnd=" + Math.random();
}
function tijiao(){
var vs1=$("#vs").val();
var vs2=$("#ve").val();
alert(vs1);
$.ajax({
type:"get",
url:"yanzheng.htm",
data:{"vs1":vs1},
success:function(data){//返回json结果
alert(data=="success");
if(data=="success"){
$("#fonts").text("成功");
}
else{
$("#fonts").text("失败");
}
}
})
}
</script>
上面这个是jsp的相关代码和ajax。ajax主要是用到文本框输入的值和验证码进行判断。。哈哈写的有点乱。。。。。。
我来讲一下细节的问题:
<img alt="找不到图" src="message/verfication.html" id="verfication" οnclick="dianji()"><a>看不清,点击图片换一张</a>
这段里有一个点击是事件,我是用原生JavaScript写的:
function dianji(){
document.getElementById("verfication").src= "message/verfication.html?rnd=" + Math.random();
}
就是这一小段。使得点击图片使验证码刷新,其中我给了一个随机的参数,这里是图片刷新的主要细节,这里主要是使这个请求刷新浏览器的缓存,所以才使得图片刷新,具体的你们就去百度查查吧。。。。。。。
2.判断输入文本框的值是否和验证码相同,这里我用到了ajax。。。
function tijiao(){
var vs1=$("#vs").val();
var vs2=$("#ve").val();
alert(vs1);
$.ajax({
type:"get",
url:"yanzheng.htm",
data:{"vs1":vs1},
success:function(data){//返回json结果
alert(data=="success");
if(data=="success"){
$("#fonts").text("成功");
}
else{
$("#fonts").text("失败");
}
}
})
}
然后又进入另一个action:
@RequestMapping(value="/yanzheng.htm",method = RequestMethod.GET)
public void getYanZheng(HttpServletRequest request,
HttpServletResponse response,String vs1){
//上面已经传了session的值,这里直接获取验证码的值,很简单
String verfications = (String) request.getSession().getAttribute("verfications");
/*System.out.println(verfications);
System.out.println(vs1);*/
if(verfications.equalsIgnoreCase(vs1)){
try {
response.getOutputStream().print("success");
} catch (IOException e) {
e.printStackTrace();
}
}
else{
try {
//运用流传值
response.getOutputStream().print("false");
} catch (IOException e) {
e.printStackTrace();
}
}
}
这里的response.getOutputStream().print("........");值传到了ajax里的success:function(data){}
就是在里面判断是否相等的。。。。。。。
完了!!!!!!!!