Repeat submit the form to solve the problem

Resubmit: after the user clicks submit, the daemon process has not been completed, the user does not know, was getting impatient, and constantly clicking submit, leading to multiple back-end data submitted to repeat the operation, resulting in data errors. So how to solve this problem?

There are two ways to solve:

1. Front Control

2. Background session judge

Front Control There are two ways, one is that after submitting the submit button is grayed out (not recommended that experience very good) by, one is submitted only once by js control.

Let us look to submit only one way through js control:

<%@ 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>
<meta content="text/html; charset=utf-8">
<title>Form Page</title>
</head>
<body>
<form action="SubmitServlet" method="post" onsubmit = "return isFirstSumbmit()">
<input type = "text" name = "userName" value=""/>
<input type = "submit" value="提交">
</form>
<script type="text/javascript">
   //提交标志 true 为已提交，false为未提交
   var subFlag = false;
   function isFirstSumbmit(){
       if(!subFlag){
          subFlag = true;
          return true;
       } else {
         return false;
       }
   }
</script>
</body>
</html>

The disadvantage of this mode is that the front control after I submit success, point your browser to return to the step (did not take the background servlet), click submit, then submit the data will still be repeated.

Let's look at the back-end session of way:

When entering the server generates a token form page set up in front of the hidden field, consistent with the relatively front-end whether to submit the token and the server each time submitted, if consistently shown that there is no duplication submitted. After successfully saving the data service side of the token blank. If not submitted represents a repeating (or distal forged token).

form form page:

<%@ 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>
<meta content="text/html; charset=utf-8">
<title>Form Page</title>
</head>
<body>
<form action="SubmitServlet" method="post">
<input type = "hidden" name="token" value="${token}"/> 
<input type = "text" name = "userName" value=""/>
<input type = "submit" value="提交">
</form>
</body>
</html>

Enter the servlet form page:

package com.session;

import java.io.IOException;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
// 进入到 form.jsp 的servlet 
public class ToFormPageServlet extends HttpServlet{

	public String getToken() {
		return UUID.randomUUID().toString();
	}
	@Override
	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 随机生成token
		String tokenValue = getToken();
		HttpSession session = req.getSession();
		// token 放入session中
		session.setAttribute("token", tokenValue);
		System.out.println("生成token成功,token值为："+ tokenValue);
		req.getRequestDispatcher("form.jsp").forward(req, resp);
	}
}

Form submission servlet:

package com.session;

import java.io.IOException;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SubmitServlet extends HttpServlet{

	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse resp){
		resp.setContentType("text/html;charset=utf-8");
	
		if(!isFirstSubmit(req)) {
			try {
				resp.getWriter().write("表单重复提交!");
			} catch (IOException e) {
				e.printStackTrace();
			}
			return ;
		}
		
		try {
			Thread.sleep(3000);
			if(isFirstSubmit(req)){
				System.out.println("数据入库"+req.getParameter("userName"));
			}
			
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		try {
			resp.getWriter().write("数据保存成功！");
		} catch (IOException e) {
			e.printStackTrace();
		}
		// 清除token
		req.getSession().removeAttribute("token");
	}
	
	/**
	 * 判断是否重复提交
	 * @param req
	 * @return
	 */
	public boolean isFirstSubmit(HttpServletRequest req) {
		// 获取表单提交的token
		String token = req.getParameter("token");
		// 去拿session里的token
		String servicToken = (String)req.getSession().getAttribute("token");
		// servicToken 为空 重复提交
		if(servicToken == null) {
			return false;
		}
		// 表单提交的token 与服务端的不一致 （防止伪造token）
		if(!servicToken.equals(token)) {
			return false;
		}
		return true;
	}
}

Repeat submit the form to solve the problem

Guess you like