Java如何在通过Servlet类生成的jsp中刷新验证码

Question

我正在尝试通过 jsp 页面中的 jquery 刷新验证码图像，但它不起作用，验证码图像是通过 java servlet 类生成的。请问如何在不刷新整个页面的情况下刷新验证码图像。

这是我的 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>  

Answer 1

朋友们，我得到了我的问题的解决方案，我在这里发布了一个答案......它工作正常

这是我的 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>

Answer 2

您可能会强制请求：

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