最近在看些基礎的東西,順便做下筆記。相信大家在平時網頁使用中,經常會有按鈕重復點擊,然后點不動刷新,還有當網絡延時比較厲害點了沒反應在點擊的重復提交。為了避免這種情況,總結了一下4點處理方案
表單重復提交 常用解決辦法。
1.通過前端解決(請參考以下的前端代碼)
2.讓提交按鈕只觸發一次(當用戶點擊提交后,再次點擊的時候不允許調用后台接口,和3類似)
3.提交按鈕變灰
4.通過后端解決,使用token+session
思路是:
第一步:
用戶輸入URL地址,調用第一個后台接口,代碼如下
package
com.itmayiedu.servlet;
import
java.io.IOException;
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 com.itmayiedu.servlet.session.TokenUtils;
@WebServlet("/LocaFromServlet")
public
class
LocaFromServlet
extends
HttpServlet {
@Override
protected
void
doGet(HttpServletRequest req, HttpServletResponse resp)
throws
ServletException, IOException {
// 生成token
String tokenValue=TokenUtils.
getToken
();
HttpSession session = req.getSession();
session.setAttribute("sessionToken", tokenValue);
req.getRequestDispatcher("from.jsp").forward(req, resp);
}
}
第二步:將第一步生成的sessionToken轉發到前端后,前端的代碼
<%@ page language=
"java" contentType=
"text/html; charset=UTF-8"
pageEncoding=
"UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Form表單</title>
<script type=
"text/javascript">
var flag =
false;//false表示為提交 true 就是已經提交
function dosubmit(){
//獲取表單提交按鈕
var btnSubmit = document.getElementById("submit");
//將表單提交按鈕設置為不可用,這樣就可以避免用戶再次點擊提交按鈕
btnSubmit.disabled= "disabled";
//返回true讓表單可以正常提交
return true;
}
</script>
</head>
<body>
<form action=
"DoFormServlet"
method=
"post" onsubmit="return dosubmit()">
<input type=
"hidden" name=
"parameterToken" value=
"${sessionToken}
">
用戶名:<input type=
"text" name=
"userName"> <input type=
"submit"
value=
"提交" id=
"submit" >
</form>
</body>
</html>
第三步:前端進行提交后,后台要判斷前端傳過來的sessionToken是否和后台的sessionToken一樣。一樣的話可以提交,不一樣就說明重復提交了,不能提交
package com.itmayiedu.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/DoFormServlet")
public class DoFormServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");// 防止瀏覽器顯示亂碼
if(!isBumit(req)){
System.out.println("您提交提交了數據..或者token錯誤!");
resp.getWriter().write("您提交提交了數據..或者token錯誤!");
return ;
}
String userName = req.getParameter("userName");
try {
Thread.sleep(300);
} catch (Exception e) {
// TODO: handle exception
}
System.out.println("數據庫插入數據...userName:" + userName);
// 插入數據庫...
resp.getWriter().write("保存成功..");
req.getSession().removeAttribute("sessionToken");
}
public Boolean isBumit(HttpServletRequest request) {
String parameterToken = request.getParameter("parameterToken");//通過前端傳的sessionToken
String sessionToken = (String) request.getSession().getAttribute("sessionToken");//根據后台生成的sessionToken
//判斷是否提交
if (sessionToken == null) {
return false;
}
// 判斷是否是偽造token
if(!(parameterToken.equals(sessionToken))){
return false;
}
return true;
}
}
所使用到的工具類是生成Token的TokenUtils,其實就是用UUID
package com.itmayiedu.servlet.session;
import java.util.UUID;
public
class TokenUtils {
static
public String getToken() {
return UUID.
randomUUID().toString();
}
public
static
void main(String[] args) {
System.
out.println(TokenUtils.
getToken());
}
}
關注我的公眾號,都是滿滿的干貨!
