SoFunction
Updated on 2025-02-28

Simple example of jquery implementing refresh-free verification code

1. Ideas:

The verification code picture on the page is a servlet, using jquery to realize asynchronous verification information

2. Files used

--Servlet used to generate pictures

-- servlet used to verify the correctness of the code

--Certified js file

--The source file in the jquery package

--Page

3. Code

Java code

import ;  
import ;  
import .Graphics2D;  
import ;  
import ;  
  
import ;  
import ;  
import ;  
import ;  
import ;  
import ;  
import ;  
  
public class VerifyCodeServlet extends HttpServlet {  
  
  // Width of the verification code picture.  private int width = 60;  
  
  // The height of the verification code picture.  private int height = 20;  
  
  // Number of verification code characters  private int codeCount = 4;  
  
  private int x = 0;  
  
  // Font height  private int fontHeight;  
  
  private int codeY;  
  
  char[] codeSequence = { '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', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };  
  
  /**
    * Initialize verification of image properties
    */  
  public void init() throws ServletException {  
    // Get initial information from it    // Width    String strWidth = ("width");  
    // high    String strHeight = ("height");  
    // Number of characters    String strCodeCount = ("codeCount");  
  
    // Convert the configured information into numerical values    try {  
      if (strWidth != null && () != 0) {  
        width = (strWidth);  
      }  
      if (strHeight != null && () != 0) {  
        height = (strHeight);  
      }  
      if (strCodeCount != null && () != 0) {  
        codeCount = (strCodeCount);  
      }  
    } catch (NumberFormatException e) {  
    }  
  
    x = width / (codeCount + 1);  
    fontHeight = height - 2;  
    codeY = height - 4;  
  
  }  
  
  protected void service(HttpServletRequest req, HttpServletResponse resp)  
      throws ServletException,  {  
  
    // Define image buffer    BufferedImage buffImg = new BufferedImage(width, height,  
        BufferedImage.TYPE_INT_RGB);  
    Graphics2D g = ();  
  
    // Create a random number generator class    Random random = new Random();  
  
    // Fill the image into white    ();  
    (0, 0, width, height);  
  
    // Create a font, the size of the font should be determined according to the height of the picture.    Font font = new Font("Fixedsys", , fontHeight);  
    // Set the font.    (font);  
  
    // Draw borders.    ();  
    (0, 0, width - 1, height - 1);  
  
    // Randomly generate 160 interference lines, making the authentication code in the image less likely to be detected by other programs.    ();  
    for (int i = 0; i < 160; i++) {  
      int x = (width);  
      int y = (height);  
      int xl = (12);  
      int yl = (12);  
      (x, y, x + xl, y + yl);  
    }  
  
    // randomCode is used to save randomly generated verification codes so that the user can verify after logging in.    StringBuffer randomCode = new StringBuffer();  
    int red = 0, green = 0, blue = 0;  
  
    // Randomly generate a verification code of codeCount number.    for (int i = 0; i < codeCount; i++) {  
      // Get randomly generated verification code numbers.      String strRand = (codeSequence[(36)]);  
      // Generate random color components to construct the color value so that the color value of each digit output will be different.      red = (255);  
      green = (255);  
      blue = (255);  
  
      // Draw the verification code into the image with randomly generated colors.      (new Color(red, green, blue));  
      (strRand, (i + 1) * x, codeY);  
  
      // Combine the generated four random numbers together.      (strRand);  
    }  
    // Save the four-digit verification code to the Session.    HttpSession session = ();  
    ("validateCode", ());  
  
    // Image cache is prohibited.    ("Pragma", "no-cache");  
    ("Cache-Control", "no-cache");  
    ("Expires", 0);  
  
    ("image/jpeg");  
  
    // Output the image to the Servlet output stream.    ServletOutputStream sos = ();  
    (buffImg, "jpeg", sos);  
    ();  
  }  
  
} 
import ;
import ;
import .Graphics2D;
import ;
import ;

import ;
import ;
import ;
import ;
import ;
import ;
import ;

public class VerifyCodeServlet extends HttpServlet {

 // Width of the verification code picture. private int width = 60;

 // The height of the verification code picture. private int height = 20;

 // Number of verification code characters private int codeCount = 4;

 private int x = 0;

 // Font height private int fontHeight;

 private int codeY;

 char[] codeSequence = { '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', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };

 /**
  * Initialize verification of image properties
  */
 public void init() throws ServletException {
 // Get initial information from it // Width String strWidth = ("width");
 // high String strHeight = ("height");
 // Number of characters String strCodeCount = ("codeCount");

 // Convert the configured information into numerical values try {
  if (strWidth != null && () != 0) {
  width = (strWidth);
  }
  if (strHeight != null && () != 0) {
  height = (strHeight);
  }
  if (strCodeCount != null && () != 0) {
  codeCount = (strCodeCount);
  }
 } catch (NumberFormatException e) {
 }

 x = width / (codeCount + 1);
 fontHeight = height - 2;
 codeY = height - 4;

 }

 protected void service(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException,  {

 // Define image buffer BufferedImage buffImg = new BufferedImage(width, height,
  BufferedImage.TYPE_INT_RGB);
 Graphics2D g = ();

 // Create a random number generator class Random random = new Random();

 // Fill the image into white ();
 (0, 0, width, height);

 // Create a font, the size of the font should be determined according to the height of the picture. Font font = new Font("Fixedsys", , fontHeight);
 // Set the font. (font);

 // Draw borders. ();
 (0, 0, width - 1, height - 1);

 // Randomly generate 160 interference lines, making the authentication code in the image less likely to be detected by other programs. ();
 for (int i = 0; i < 160; i++) {
  int x = (width);
  int y = (height);
  int xl = (12);
  int yl = (12);
  (x, y, x + xl, y + yl);
 }

 // randomCode is used to save randomly generated verification codes so that the user can verify after logging in. StringBuffer randomCode = new StringBuffer();
 int red = 0, green = 0, blue = 0;

 // Randomly generate a verification code of codeCount number. for (int i = 0; i < codeCount; i++) {
  // Get randomly generated verification code numbers.  String strRand = (codeSequence[(36)]);
  // Generate random color components to construct the color value so that the color value of each digit output will be different.  red = (255);
  green = (255);
  blue = (255);

  // Draw the verification code into the image with randomly generated colors.  (new Color(red, green, blue));
  (strRand, (i + 1) * x, codeY);

  // Combine the generated four random numbers together.  (strRand);
 }
 // Save the four-digit verification code to the Session. HttpSession session = ();
 ("validateCode", ());

 // Image cache is prohibited. ("Pragma", "no-cache");
 ("Cache-Control", "no-cache");
 ("Expires", 0);

 ("image/jpeg");

 // Output the image to the Servlet output stream. ServletOutputStream sos = ();
 (buffImg, "jpeg", sos);
 ();
 }

}

Java code

import ;  
import ;  
  
import ;  
import ;  
import ;  
import ;  
  
public class ResultServlet extends HttpServlet {  
  
  /**  
   * The doGet method of the servlet. <br>  
   *  
   * This method is called when a form has its tag value method equals to get.  
   *  
   * @param request the request send by the client to the server  
   * @param response the response send by the server to the client  
   * @throws ServletException if an error occurred  
   * @throws IOException if an error occurred  
   */  
  public void doGet(HttpServletRequest request, HttpServletResponse response)  
      throws ServletException, IOException {  
  
    doPost(request, response);  
  }  
  
  /**  
   * The doPost method of the servlet. <br>  
   *  
   * This method is called when a form has its tag value method equals to post.  
   *  
   * @param request the request send by the client to the server  
   * @param response the response send by the server to the client  
   * @throws ServletException if an error occurred  
   * @throws IOException if an error occurred  
   */  
  public void doPost(HttpServletRequest request, HttpServletResponse response)  
      throws ServletException, IOException {  
  
    ("text/html;charset=utf-8");  
    String validateC = (String) ().getAttribute("validateCode");  
    String veryCode = ("c");  
    PrintWriter out = ();  
    if(veryCode==null||"".equals(veryCode)){  
      ("Verification code is empty");  
    }else{  
      if((veryCode)){  
        ("Verification code is correct");  
      }else{  
        ("Verification code error");  
      }  
    }  
    ();  
    ();  
  }  
  
} 
import ;
import ;

import ;
import ;
import ;
import ;

public class ResultServlet extends HttpServlet {

 /**
 * The doGet method of the servlet. <br>
 *
 * This method is called when a form has its tag value method equals to get.
 * 
 * @param request the request send by the client to the server
 * @param response the response send by the server to the client
 * @throws ServletException if an error occurred
 * @throws IOException if an error occurred
 */
 public void doGet(HttpServletRequest request, HttpServletResponse response)
  throws ServletException, IOException {

 doPost(request, response);
 }

 /**
 * The doPost method of the servlet. <br>
 *
 * This method is called when a form has its tag value method equals to post.
 * 
 * @param request the request send by the client to the server
 * @param response the response send by the server to the client
 * @throws ServletException if an error occurred
 * @throws IOException if an error occurred
 */
 public void doPost(HttpServletRequest request, HttpServletResponse response)
  throws ServletException, IOException {

 ("text/html;charset=utf-8");
 String validateC = (String) ().getAttribute("validateCode");
 String veryCode = ("c");
 PrintWriter out = ();
 if(veryCode==null||"".equals(veryCode)){
  ("Verification code is empty");
 }else{
  if((veryCode)){
  ("Verification code is correct");
  }else{
  ("Verification code error");
  }
 }
 ();
 ();
 }

}

Js code

function changeImg(){  
  var imgSrc = $("#imgObj");  
  var src = ("src");  
  ("src",chgUrl(src));  
}  
//Time stamp//In order to make the image generated inconsistently, that is, the browser does not read the cache, so a time stamp is requiredfunction chgUrl(url){  
  var timestamp = (new Date()).valueOf();  
  url = (0,17);  
  if((("&")>=0)){  
    url = url + "×tamp=" + timestamp;  
  }else{  
    url = url + "?timestamp=" + timestamp;  
  }  
  return url;  
}  
  
function isRightCode(){  
  var code = $("#veryCode").attr("value");  
  code = "c=" + code;  
  $.ajax({  
    type:"POST",  
    url:"resultServlet",  
    data:code,  
    success:callback  
  });  
}  
  
function callback(data){  
  $("#info").html(data);  
} 
function changeImg(){
 var imgSrc = $("#imgObj");
 var src = ("src");
 ("src",chgUrl(src));
}
//Time stamp//In order to make the image generated inconsistently, that is, the browser does not read the cache, so a time stamp is requiredfunction chgUrl(url){
 var timestamp = (new Date()).valueOf();
 url = (0,17);
 if((("&")>=0)){
 url = url + "×tamp=" + timestamp;
 }else{
 url = url + "?timestamp=" + timestamp;
 }
 return url;
}

function isRightCode(){
 var code = $("#veryCode").attr("value");
 code = "c=" + code;
 $.ajax({
 type:"POST",
 url:"resultServlet",
 data:code,
 success:callback
 });
}

function callback(data){
 $("#info").html(data);
}

Html code

<%@ page language="java" contentType="text/html; charset=UTF-8"  
  pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <script type="text/javascript" src="js/"></script>  
    <script type="text/javascript" src="js/"></script>  
    <title>test verify code</title>  
  </head>  
  <body>  
    <input  name="veryCode" type="text"/>  
    <img  alt="" src="verifyCodeServlet"/>  
    &lt;a href="#" onclick="changeImg()">change one</a>    &lt;input type="button" value="verify" onclick="isRightCode()"/&gt;  
    &lt;div &gt;&lt;/div&gt;  
  &lt;/body&gt;  
&lt;/html&gt;

The above simple example of jquery's implementation of refresh-free verification code is all the content I share with you. I hope you can give you a reference and I hope you can support me more.