点击验证码无刷新重新加载验证码图片

   生成验证码图片的image.jsp:

<%@page contentType="image/jpeg;charset=utf-8"%>
<%@page import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" %>
<%@ page import="java.io.OutputStream" %>
<html>
 <body>
  <%! 
   Color getRandColor(int fc,int bc)
   {
    Random rd=new Random();
    if(fc>255) fc=255;
    if(bc>255) bc=255;
    int red=fc+rd.nextInt(bc-fc);
    int green=fc+rd.nextInt(bc-fc);
    int blue=fc+rd.nextInt(bc-fc);
    return new Color(red,green,blue);
   }
   %>
   <% 
    Random r=new Random();
    response.addHeader("Pragma","No-cache");
    response.addHeader("Cache-Control","no-cache");
    response.addDateHeader("expires",0);   
    int width=90;
    int height=23;
   BufferedImage pic=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
   Graphics gc=pic.getGraphics();
   gc.setColor(getRandColor(200,250));
   gc.fillRect(0,0,width,height);
   String[] rNum ={"0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f",
      "g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w",
      "x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N",
      "O","P","Q","R","S","T","U","V","W","X","Y","Z"};
   int[] style = {Font.PLAIN,Font.BOLD,Font.ITALIC,Font.PLAIN+Font.BOLD,
     Font.BOLD+Font.ITALIC,Font.PLAIN+Font.ITALIC,Font.PLAIN+Font.BOLD+Font.ITALIC};
   gc.setColor(Color.WHITE);
   gc.drawLine(0,30,90,10);
   gc.setColor(getRandColor(160,200));
   for (int i=0;i<50;i++)    
   {
    int x = r.nextInt(width);    
    int y = r.nextInt(height);    
    int xl = r.nextInt(10);    
    int yl = r.nextInt(10);    
    gc.drawLine(x,y,x+xl,y+yl);    
   }
   gc.setColor(getRandColor(60,150));
   String rt = "";
   for(int i=0;i<4;i++){
    String temp = rNum[r.nextInt(62)];
    rt = rt+temp;
    gc.setFont(new Font("Times New Roman",style[r.nextInt(7)],15));
    gc.drawString(temp,5+i*15+r.nextInt(10),10+r.nextInt(10));
   }
   gc.dispose();
   session.setAttribute("randNum",rt);   
   OutputStream os=response.getOutputStream();
   ImageIO.write(pic,"JPEG",os);
   System.out.println("当前验证码为:"+session.getAttribute("randNum"));
   os.flush();
   os.close();
   os=null;
   response.flushBuffer();
   out.clear();
   out = pageContext.pushBody();
    %>
 </body>
</html>

实现无刷新重新加载步骤: 

1.在需要使用验证码的网页文件头部加上js代码:

写道
<script language="JavaScript">
function reloadcode(){
var verify=document.getElementById('safecode');
verify.setAttribute('src','image.jsp?'+Math.random());
//这里必须加入随机数不然地址相同无法重新加载
}
</script>

 

2.然后再验证码图片里面写onclick呼出上面的函数重新加载:

  

写道
<img src="image.jsp" id="safecode" border="0" οnclick="reloadcode()"
style="cursor:hand;padding:2px 8px 0pt 3px;" />

3.两个文件在同一目录下,点击图片即可实现验证码重新加载

 

参考:http://zhidao.baidu.com/question/97875728.html
         http://www.itwis.com/html/programme/javascript/20080416/1296.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值