JavaWeb——驗證碼功能解決表單重複提交問題(使用谷歌驗證碼jar包為例)

i_am_handsome_發表於2020-11-22
JavaWeb谷歌JAR

驗證碼功能的實現與解決表單重複提交問題

表單重複提交有三種常見的情況：

  1. 提交完表單，伺服器使用請求轉發來進行頁面跳轉。這個時候，使用者按下功能鍵F5(重新整理頁面)，就會重新發起最後一次提交表單的請求。造成表單重複提交問題。解決方法：使用重定向來進行跳轉
  2. 使用者正常提交伺服器，但是由於網路延遲等原因，遲遲未收到伺服器的響應，這個時候，使用者以為提交失敗，然後多點了幾次提交操作，也會造成表單重複提交。
  3. 使用者正常提交伺服器。伺服器也沒有延遲，但是提交完成後，使用者回退瀏覽器(遊覽器的返回頁面功能)。重新提交表單，也會造成表單重複提交。

請求重定向解決表單提交問題

因為請求轉發是一次請求，請求重定向是兩次請求，具體見此博文詳解：
https://blog.csdn.net/i_am_handsome_/article/details/109724739

但，請求重定向只能解決上述表單提交問題的第一種情況。

//請求轉發
req.getRequestDispatcher("/pages/client/index.jsp").forward(req, resp);

//請求重定向
resp.sendRedirect(req.getContextPath());

驗證碼解決表單提交問題

驗證碼可以解決上述表單提交問題的後兩種情況。

使用谷歌驗證碼jar包kaptcha.jar實現驗證碼操作步驟:

  1. 匯入谷歌驗證碼的jar 包
  2. 在web.xml 中去配置用於生成驗證碼的Servlet 程式
<servlet>
	<servlet-name>KaptchaServlet</servlet-name>
	<servletclass>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>KaptchaServlet</servlet-name>
	<url-pattern>/kaptcha.jpg</url-pattern>
</servlet-mapping>
  1. 在表單中使用img 標籤去顯示驗證碼圖片並使用它

<img src=“http://localhost:8080/javaweb/kaptcha.jpg” >

  1. 獲取Session域中的驗證碼，並刪除Sessjion中的驗證碼（防止下次還是用之前的驗證碼）
  2. 獲取提交的表單資訊中，驗證碼引數值。
  3. 比較Session中的驗證碼和表單項中的驗證碼是否相等
//獲取Session中的驗證碼
String token = (String) req.getSession().getAttribute(KAPTCHA_SESSION_KEY);
//刪除Session中的驗證碼
req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);

//獲取表單項驗證碼資訊
String code = req.getParameter("code");

//檢查驗證碼是否正確
if (token != null && token.equalsIgnoreCase(code)) {}

點選驗證碼圖片切換驗證碼

如果驗證碼看不清，實現點選驗證碼圖片切換驗證碼的資訊的操作。

//給驗證碼的圖片，繫結單擊事件
$("#code_img").click(function () {

//src屬性表示驗證碼img標籤的圖片路徑,修改後自動跳轉
// new Date();防止快取
this.src = "${basePath}kaptcha.jpg?d=" + new Date();

});

相關文章