Java如何通过Servlet类刷新jsp中的Captcha

Question

I am trying to refresh captcha image through jquery in jsp page but its not working and the captcha image is generated through java servlet class . Please how I can refresh the captcha image without refreshing whole page.

Here is my servlet code

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();



 }


}

Here is my jsp page

<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 That I am using

<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>  

Answer 1

Friends I got the solution of my problem and I am posting an answer overhere... and it is working fine

Here is my JsQuery Code.....

<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>

and here is my jsp code.....

<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>

Answer 2

您可能强制要求：

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