表单重复提交解决方案(防止Http重复提交

使用javascript 解决

既然存在上述所说的表单重复提交问题，那么我们就要想办法解决，比较常用的方法是采用JavaScript来防止表单重复提交，具体做法如下：

修改form.jsp页面，添加如下的JavaScript代码来防止表单重复提交

代码:

<%@ 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 isFlag = false; //表单是否已经提交标识，默认为false

    function submitFlag() {

        if (!isFlag) {
            isFlag = true;
            return true;
        } else {
            return false;
        }

    }
</script>
</head>

<body>
    <form action="${pageContext.request.contextPath}/DoFormServlet"
        method="post" onsubmit="return submitFlag()">
        用户名：<input type="text" name="userName"> <input type="submit"
            value="提交" id="submit">
    </form>
</body>
</html>
 除了用这种方式之外，经常见的另一种方式就是表单提交之后，将提交按钮设置为不可用，让用户没有机会点击第二次提交按钮，代码如下：
 
function dosubmit(){
    //获取表单提交按钮
    var btnSubmit = document.getElementById("submit");
    //将表单提交按钮设置为不可用，这样就可以避免用户再次点击提交按钮
    btnSubmit.disabled= "disabled";
    //返回true让表单可以正常提交
    return true;
}

使用后端提交解决

对于【场景二】和【场景三】导致表单重复提交的问题，既然客户端无法解决，那么就在服务器端解决，在服务器端解决就需要用到session了。

具体的做法：在服务器端生成一个唯一的随机标识号，专业术语称为Token(令牌)，同时在当前用户的Session域中保存这个Token。然后将Token发送到客户端的Form表单中，在Form表单中使用隐藏域来存储这个Token，表单提交的时候连同这个Token一起提交到服务器端，然后在服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致，如果不一致，那就是重复提交了，此时服务器端就可以不处理重复提交的表单。如果相同则处理表单提交，处理完后清除当前用户的Session域中存储的标识号。
在下列情况下，服务器程序将拒绝处理用户提交的表单请求：

存储Session域中的Token(令牌)与表单提交的Token(令牌)不同。
当前用户的Session中不存在Token(令牌)。

用户提交的表单数

@WebServlet("/ForwardServlet")
public class ForwardServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.getSession().setAttribute("sesionToken", TokenUtils.getToken());
        req.getRequestDispatcher("form.jsp").forward(req, resp);
    }
}
转发页面:
<%@ 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>

</head>

<body>
    <form action="${pageContext.request.contextPath}/DoFormServlet"
        method="post" onsubmit="return dosubmit()">
        <input type="hidden" name="token" value="${sesionToken}"> 用户名：<input type="text"
            name="userName"> <input type="submit" value="提交" id="submit">
    </form>
</body>
</html>

@WebServlet("/DoFormServlet")
public class DoFormServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        boolean flag = isFlag(req);
        if (!flag) {
            resp.getWriter().write("已经提交...");
            System.out.println("数据已经提交了..");
            return;
        }
        String userName = req.getParameter("userName");
        try {
            Thread.sleep(300);
        } catch (Exception e) {
            // TODO: handle exception
        }
        System.out.println("往数据库插入数据...." + userName);
        resp.getWriter().write("success");
    }

    public boolean isFlag(HttpServletRequest request) {
        HttpSession session = request.getSession();
        String sesionToken = (String) session.getAttribute("sesionToken");
        String token = request.getParameter("token");
        if (!(token.equals(sesionToken))) {
            return false;
        }
        session.removeAttribute("sesionToken");
        return true;
    }
}

posted on 2018-10-28 17:17 jovelove 阅读(398) 评论(0) 收藏举报