IT兄弟連 JavaWeb教程 jQuery對AJAX的支持經典案例
- 2019 年 10 月 5 日
- 筆記
版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/ITXDL123/article/details/92995988
案例需求：編寫用戶登陸頁面的驗證碼模塊，在用戶進行登陸時，輸入驗證碼後不需要點擊提交按鈕，使用AJAX異步地向服務器發送驗證驗證碼的請求。如果驗證碼正確，可以點擊提交按鈕，如果驗證碼輸入錯誤，提示用戶。如果用戶看不清驗證碼，點擊驗證碼還可以刷新出新的驗證碼。
案例實現：
驗證碼原理：當頁面請求一個驗證碼的Servlet時，這個Servlet會把數據以圖片的形式傳給客戶端，並把數據以字符串的形式存入了session中。當用戶以圖片為標準輸入對應的驗證碼並發送給對應的用來驗證驗證碼的Servlet時，驗證驗證碼的Servlet收到用戶輸入的數據，並從session取出對應的驗證碼字符進行驗證即可。
● 定義向客戶端發送驗證碼的Servlet。詳細代碼如下：
package com.xdl.servlet; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGImageEncoder; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.awt.*; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.OutputStream; import java.util.Random; @WebServlet("/checkCode") public class CheckCode extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("image/jpeg"); BufferedImage image = new BufferedImage (60, 20, BufferedImage. TYPE_INT_RGB); Graphics g = image.getGraphics(); Random r = new Random(); g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255))); g.fillRect(0, 0, 60, 20); g.setColor(new Color(0,0,0)); String number = String.valueOf(r.nextInt(99999)); HttpSession session = request.getSession(); session.setAttribute("number", number); g.drawString(number, 5, 15); g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255))); g.drawLine(r.nextInt(60), r.nextInt(20), r.nextInt(60), r.nextInt(20)); OutputStream os = response.getOutputStream(); JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os); encoder.encode(image); } }
● 定義用來驗證驗證碼準確性的Servlet。詳細代碼如下：
package com.xdl.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; @WebServlet("/validateCheckCode") public class ValidateCheckCode extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); String code = request.getParameter("code"); String answer = (String)request.getSession().getAttribute("number"); Map<String,Object> info = new HashMap<>(); if(code.equals(answer)){ info.put("state", 1); info.put("msg", "驗證碼正確"); }else{ info.put("state", 0); info.put("msg", "驗證碼不正確"); } String jsonStr = JSONObject.fromObject(info).toString(); PrintWriter pw = response.getWriter(); pw.write(jsonStr); pw.close(); } }
● 編寫客戶端頁面，包括用戶名輸入框、密碼輸入框、以及驗證碼輸入框和提交按鈕。詳細代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript"> function validCode(){ $.ajax({ url:'validateCheckCode', type:'post', data:{code:$("#code").val()}, dataType:'json', success:function(message){ if(message.state==1){ $("#loginBtn").removeAttr("disabled"); }else{ $("#loginBtn").attr('disabled','disabled'); } $("#sp1").html(message.msg); } }); } function changeCode(){ $("#imgcode").attr("src","checkCode.do?r="+Math.random()); $("#loginBtn").attr('disabled','disabled'); } </script> </head> <body> 賬號:<input type="text" placeholder="請輸入賬號" name="account_no"> <br> 密碼:<input type="password" placeholder="請輸入密碼" name="account_password"> <br> 驗證碼:<input type="text" name="check_code" id="code" placeholder="請輸入驗證碼" οnblur="validCode()" ><img src="checkCode.do" id="imgcode" οnclick= "changeCode()"><br> <span id="sp1"></span><br> <input type="submit" id="loginBtn" value="登錄" disabled="disabled"> </body> </html>
目前全部的代碼已經編寫完成，我們打開Tomcat服務器，在瀏覽器中輸入http://localhost:8080/checkcode/login.html。瀏覽器將出現如圖2所示的頁面。
此時是無法點擊登陸按鈕的，因為我們的驗證碼沒有通過驗證，現在我們輸入正確的驗證碼，然後將鼠標移出驗證碼輸入框。
圖2 login.html
圖3 輸入了正確的驗證碼
我們輸入了正確的驗證碼，並且服務器也已經驗證通過了，現在我們就可以點擊登陸按鈕了。
現在我們輸入錯誤的驗證碼來看看頁面上會出現什麼效果。
可以看到我們輸入了錯誤的驗證碼，服務器檢查沒有通過，登陸按鈕還是不可點擊的。
有時我們頁面上面的驗證碼不清晰，不能很好的辨認其中的字符，所以在我們的登陸頁面中，為驗證碼圖片添加了一個單擊事件，當點擊驗證碼圖片時，頁面會使用Ajax重新向服務器發送新的請求來刷新驗證碼。
圖4 輸入錯誤的驗證碼後，提示驗證碼
圖5 使用AJAX向服務端重新獲取驗證碼
不正確，並且登陸按鈕無法點擊
