`

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

 
阅读更多

   生成验证码图片的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" onclick="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

分享到:
评论

相关推荐

    google验证码无刷新

    而"无刷新"则表明这种验证码系统在用户验证过程中无需加载新页面或重新加载当前页面,这不仅优化了用户体验,还减少了服务器的负载。 【压缩包子文件的文件名称列表】中的"无刷新仿google波形扭曲彩色Asp.doc"可能...

    html5点击刷新验证码特效

    可以使用`addEventListener`方法绑定一个点击事件,当用户点击刷新按钮时,触发对应的回调函数,这个函数内就可以执行上述的验证码刷新逻辑。 此外,HTML5的离线存储技术,如`localStorage`或`sessionStorage`,也...

    asp页面无刷新生成图片验证码

    6. **客户端展示**:将生成的验证码图片以JPEG或PNG格式响应给浏览器。这可以通过设置HTTP响应的MIME类型为“image/jpeg”或“image/png”,然后将`Bitmap`对象转换为字节流并写入响应流来实现。 7. **HTML和...

    点击图片刷新验证码插件 for PHP168.rar

    通过此插件,用户只需点击验证码图片即可实现验证码的刷新,而无需重新加载整个页面,从而保持了表单数据的完整性。 描述部分提到了在表单验证过程中遇到的不便,即当用户需要验证其输入时,通常需要刷新页面以获取...

    Ajax异步无刷新验证码

    5. **前端更新验证码**:JavaScript接收到服务器的响应后,解析数据,更新验证码图像的源(src)属性,使其指向新的验证码图片,同时清空输入框,让用户重新输入验证码。 6. **验证过程**:当用户提交表单时,前端...

    asp.net图片验证码,单击无刷新更换图片

    为了实现点击无刷新更换图片,可以使用JavaScript或者jQuery监听图片的`click`事件,每次点击时更改`img`标签的`src`属性,使其指向`CreateImage.aspx`加上随机参数(如时间戳),这样浏览器就会认为这是一个新请求...

    jsp验证码刷新功能

    `:更新图片的源地址,通过添加当前时间和随机数,确保每次点击刷新按钮时都会加载新的验证码图片。 3. **刷新按钮绑定**:定义了一个按钮,当用户点击时会触发`refresh`函数执行,从而刷新验证码。 ```html ...

    AJAX+jsp无刷新验证码实例

    无刷新验证码通过在用户与服务器之间进行异步通信,实现了在不重新加载整个页面的情况下更新验证码,减少了用户的等待时间。 AJAX是前端开发中的一种重要技术,它允许浏览器在后台与服务器交换数据并局部更新页面,...

    Zend_captcha_image点击刷新图片验证码(dojo_ajax)

    【描述】 简单的验证码图片点击后实现图片刷新意味着当用户点击验证码图片时,无需页面整体刷新,图片会动态更新。这样做可以提高用户体验,因为用户不需要等待整个页面重新加载只是为了获取一个新的验证码。而...

    jQuery ajax 无刷新 验证码 asp.net

    无刷新验证码利用AJAX技术,可以在不重新加载整个页面的情况下更新验证码图片,提高用户交互体验。 jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax交互。在实现无刷新验证码时,...

    JSP无刷新验证码

    在JSP中实现无刷新验证码,意味着用户在不重新加载整个页面的情况下可以更新验证码,提高了用户体验。本文将详细介绍如何使用Ajax和JSP来实现这一功能。 首先,我们需要理解Ajax(Asynchronous JavaScript and XML...

    JSP无刷新验证码(JS)

    当用户点击链接时,会触发`reloadImage`函数,并传入验证码图片的URL,从而实现验证码的刷新功能。这种方法将功能逻辑封装在独立的函数中,使得代码结构更加清晰。 ##### 3. 利用`Math.random()`解决浏览器缓存问题...

    asp.net ajax实现无刷新验证码

    这里,我们还为验证码图片添加了`onclick`事件,当用户点击验证码时,会调用`fGetCode()`函数,从而触发验证码的更新。 #### 总结 通过上述步骤,我们成功实现了基于ASP.NET AJAX的无刷新验证码功能。这种方式不仅...

    只更新验证码,不刷新页面

    在网页设计和开发中,用户体验是一个非常重要的...同时,这也对服务器资源的利用更为高效,因为只有验证码图片需要重新加载,而不是整个页面。在实际应用中,这种技术常被用于注册、登录或其他涉及安全验证的表单页面。

    ashx生成验证码实现无刷新页面更换验证码

    使用JavaScript的`XMLHttpRequest`对象或者jQuery的`$.ajax`方法,可以向服务器发送异步请求,获取新的验证码图片URL,然后动态更新页面上的验证码图片源,而无需整个页面重新加载。 5. **session管理**:为了验证...

    Android生成验证码图片

    在实际开发中,可以创建一个自定义View来生成和显示验证码图片,或者使用第三方库如Android-Universal-Image-Loader或Glide来加载和刷新验证码。 7. **安全考虑**: 虽然简单的数字验证码可以防止一些基本的自动...

    无刷新验证码asp.net

    实现无刷新验证码的关键在于AJAX(Asynchronous JavaScript and XML),它允许网页的部分内容异步更新,而无需重新加载整个页面。在ASP.NET中,我们可以使用jQuery库或者内置的UpdatePanel控件来实现AJAX功能。 ...

    验证码的实现方法-局部刷新

    4. **局部刷新**:当用户需要重新获取验证码时,可以点击一个“刷新”按钮。此时,前端发送一个简单的HTTP请求到服务器,请求中包含当前会话的标识。服务器根据这个标识找到之前生成的验证码,但生成一个新的变形...

    jsp中实现验证码刷新功能

    在JSP(JavaServer Pages)中实现验证码刷新功能是提高用户体验的重要一环,因为这允许用户在验证码无法正常显示或模糊不清时,无需刷新整个页面就能获取新的验证码。下面我们将详细探讨如何在JSP中实现中文验证码...

Global site tag (gtag.js) - Google Analytics