2014-12-04 62 views
1

我想通过jsp页面中的jquery刷新验证码图像,但它不工作,验证码图像是通过java servlet类生成的。请如何刷新验证码图像而不刷新整个页面。Java如何刷新通过Servlet类生成jsp的验证码

这里是我的servlet代码

public class CaptchaDemo extends HttpServlet { 

private int height=0; 
    private int width=0; 

    public static final String CAPTCHA_KEY = "captcha_key_name"; 

    public void init(ServletConfig config) throws ServletException { 
    super.init(config); 
    height=Integer.parseInt(getServletConfig().getInitParameter("height")); 
    width=Integer.parseInt(getServletConfig().getInitParameter("width")); 
    } 


protected void doGet(HttpServletRequest req, HttpServletResponse response) 
    throws IOException, ServletException { 
    //Expire response 
    response.setHeader("Cache-Control", "no-cache"); 
    response.setDateHeader("Expires", 0); 
    response.setHeader("Pragma", "no-cache"); 
    response.setDateHeader("Max-Age", 0); 

    BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_BYTE_GRAY); 
    Graphics2D graphics2D = image.createGraphics(); 
    Hashtable map = new Hashtable(); 
    Random r = new Random(); 
    String token = Long.toString(Math.abs(r.nextLong()), 36); 
    String ch = token.substring(0,6); 
    Color c = new Color(0.6662f, 0.4569f, 0.3232f); 
    GradientPaint gp = new GradientPaint(30, 30, c, 15, 25, Color.white, true); 
    graphics2D.setPaint(gp); 
    Font font=new Font("Verdana", Font.CENTER_BASELINE , 26); 
    graphics2D.setFont(font); 
    graphics2D.drawString(ch,2,20); 
    graphics2D.dispose(); 

    HttpSession session = req.getSession(true); 
    session.setAttribute(CAPTCHA_KEY,ch); 

    OutputStream outputStream = response.getOutputStream(); 
    ImageIO.write(image, "jpeg", outputStream); 
    outputStream.close(); 



} 


} 

,这里是我的jsp页面

<table class="form_table_login"> 
     <tr><td class="form_table_td"> Email : </td> 
     <td><input type="text" name="custEmail" placeholder="E-mail or Mobile" class="table_login_input" value="<%=co_email%>"/></td></tr> 
     <tr><td class="form_table_td"> Password : </td> 
     <td><input type="password" name="custPassword" placeholder="Password" class="table_login_input" value="<%=co_password%>"/></td></tr> 

    <tr><td> 
      <div id="captchaDiv"> 

      <td><span><img src="Captcha.jpg" border="0" id='captchaImage'></span></td> 
    <span><a id="captchaRef">  <img src="../images/refresh-icon.png" style="width: 2%;" /></a></span> 
      <s:textfield label=" Captcha Code" name="j_captcha_response" size="20" maxlength="10"/> 
      </div> 



      </td> 
      </tr> 


    <tr><td ></td> 

JQuery的,我使用

<script type="text/javascript"> 


$(document).ready(function() { 
    $("#captchaRef").click(function() { 
     $('#captchaImage').attr('src', '').attr('src', 'Captcha.jpg'); 
    }); 
}); 

</script> 

的web.xml

<servlet> 
<servlet-name>Captcha</servlet-name> 
<servlet-class>com.umoja.captcha.CaptchaDemo</servlet-class> 
<init-param> 
    <description>passing height</description> 
    <param-name>height</param-name> 
    <param-value>30</param-value> 
</init-param> 
<init-param> 
    <description>passing height</description> 
    <param-name>width</param-name> 
    <param-value>120</param-value> 
</init-param> 
</servlet> 
<servlet-mapping> 
<servlet-name>Captcha</servlet-name> 
<url-pattern>/customer/Captcha.jpg</url-pattern> 
<url-pattern>/pages/Captcha.jpg</url-pattern> 
    <url-pattern>/merchants/Captcha.jpg</url-pattern> 

</servlet-mapping> 
+1

它究竟是不是工作?你有什么错误吗? – 2014-12-04 11:07:46

+0

不,没有任何类型的错误我点击刷新图像和更改图像没有反映 – Harshit 2014-12-04 11:12:10

+0

你试过AJAX ...? – ashokramcse 2014-12-04 11:21:41

回答

3

朋友我得到了我的问题的解决方案,我张贴的答案overhere ......这是工作的罚款

这是我JsQuery代码.. ...

<script type="text/javascript"> 


$(document).ready(function() { 

$.ajaxSetup({ 
     cache: false 
    }); 

    var timestamp = (new Date()).getTime(); 


    $("#captchaRef").click(function() { 

     var timestamp = (new Date()).getTime(); 
     var newSrc = $("#captchaImage").attr("src").split("?"); 
    // $('#captchaImage').attr('src', '').attr('src', 'Captcha.jpg'); 
     newSrc = newSrc[0] + "?" + timestamp; 
     $("#captchaImage").attr("src", newSrc); 
     $("#captchaImage").slideDown("fast"); 

    }); 
}); 

</script> 

,这里是我的JSP代码.....

<div id="captchaDiv"> 

      <td><span><img src="Captcha.jpg" border="0" id='captchaImage'></span></td> 
      <span><a id="captchaRef">  <img src="../images/refresh-icon.png" style="width: 2%;" /></a></span> 
      <s:textfield label=" Captcha Code" name="j_captcha_response" size="20" maxlength="10"/> 
      </div> 
+0

简直太棒了 – user3738027 2017-08-04 10:55:09

0

您可能强制要求:

$('#captchaImage').attr('src', 'Captcha.jpg?_=' + Math.random());