Implement the verification code function based on ajax,

Implement the verification code function based on ajax,

The example in this article shares the code for implementing the verification code function of ajax for your reference. The details are as follows:

First, create a verification code:

<% @ Page contentType = "image/jpeg; charset = UTF-8" language = "java" import = "java. util. *, java. awt. *, java. awt. image. *, javax. imageio. * "pageEncoding =" UTF-8 "%> <! -- Import the awt and awt. image packages above --> <%! // Obtain the Random Color public Color getColor () {random Random = new random (); // use rgb () to randomly generate the Color int r = Random. nextInt (256); int g = random. nextInt (256); int B = random. nextInt (256); return new Color (r, g, B);} // obtain a random number to generate a 4-digit public String getNum () {String str = ""; random random = new Random (); for (int I = 0; I <4; I ++) {str + = random. nextInt (10); // 0-9} return str ;}%> <%/* clear cache */response. setHeader ("pragma", "mo-cache"); response. setHeader ("cache-control", "no-cache"); response. setDateHeader ("expires", 0); // generate a rectangle box BufferedImage image = new BufferedImage (80, 30, BufferedImage. TYPE_INT_RGB); // obtain the paint brush tool Graphics g = image. getGraphics (); // you can specify the color of the rectangle. setColor (new Color (200,200,200); // you can specify coordinates, width, and height. fillRect (0, 0, 80, 30); // random interference line for (int I = 0; I <30; I ++) {Random random = new Random (); int x = random. nextInt (80); int y = random. nextInt (30); int x1 = random. nextInt (x + 10); int y1 = random. nextInt (y + 10); // sets the random color g. setColor (getColor (); // draw g. drawLine (x, y, x1, y1);} // color of the word and number g. setFont (new Font ("Microsoft YaHei", Font. BOLD, 16); g. setColor (Color. BLACK); // obtain the random number String checkNum = getNum (); // concatenate a space StringBuffer sb = new StringBuffer (); for (int I = 0; I <checkNum. length (); I ++) {sb. append (checkNum. charAt (I) + "") ;}// draw the number g. drawString (sb. toString (), 15, 20); // save it to the session field. setAttribute ("CHECKNUM", checkNum); // For example, 1010 // output the image in jpeg format through the byte stream ImageIO. write (image, "jpeg", response. getOutputStream (); // clear the cache out. clear (); // put it in the body out = pageContext. pushBody (); %>

Compress the verification code into an image, reference it in checkcode. jsp, and use ajax to send data to the server on this page.

<% @ Page language = "java" import = "java. util. * "pageEncoding =" UTF-8 "%> <% String path = request. getContextPath (); String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path + "/"; %> <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> 
Then write the server, receive the input information, determine whether the verification code matches each other, and output the corresponding image path as an output stream.

Public class CheckcodeServlet extends HttpServlet {@ Override protected void doPost (HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req. setCharacterEncoding ("UTF-8"); resp. setContentType ("text/html; charset = UTF-8"); // image path String tip = "images/MsgError.gif"; String checkcode = req. getParameter ("checkcode"); // test System. out. println (checkcode); // obtain the number String checkcodeService = (String) req in the session field. getSession (). getAttribute ("CHECKNUM"); // determines if (checkcode. equals (checkcodeService) {tip = "images/MsgSent.gif";} // output path PrintWriter pw = resp. getWriter (); pw. write (tip); pw. flush (); pw. close ();}}
When you enter 4th numbers, a prompt is displayed.
Running result:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.