javaee 04 表单重复提交

作者: 不再饿肚子给人送饭 | 来源:发表于2018-01-13 10:58 被阅读0次

javaee 04 表单重复提交
12、Struts2表单重复提交
Struts2学习笔记 | 防止表单重复提交及自定义拦截器
Javascript-表单脚本
前端开发注意事项
表单
防止表单重复提交
HTML表单
002_JavaWeb避免重复提交
struts令牌token

@WebServlet("/login")
public class LoginServlet extends HttpServlet{

    private static final long serialVersionUID = 1L;
    
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("LoginServlet.doGet()");
        req.getRequestDispatcher("/WEB-INF/views/Login.jsp").forward(req, resp);
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("LoginServlet.doPost()");
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=utf-8");
        
        String username = req.getParameter("usernmae");
        System.out.println("向数据库中插入数据 -->" + username);
    }
}

<%@ 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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="/login" method="post">
        用户名:<input type="text" name="usernmae" id="usernmae" value="" />
        <input type="submit" value="提交"/>
    </form>
</body>
</html>

当在页面中点击提交之后

image.png

情况1 此时按下F5

image.png
image.png

会重复去数据库中插入数据,这肯定不行

情况2

image.png

较为常用的解决方案
使用JavaScript 来解决这种问题

提交后禁用按钮

image.png

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //点击按钮之后,只让提交一次
                $("#subBtn").click(function(){
                    $("#addForm").submit();
                    //提交之后将按钮禁用,随便点,反正也提交不上去
                    $("#subBtn").attr("disabled",true);
                });
            });
</script>

通过标识符,让按钮只能点击一次

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            //标识符
            var status = false;

            $("#subBtn").click(function() {

                if (status == false) {
                    $("#addForm").submit();
                    //更改标识符,这样点了之后因为标识符不等于false,将不会提交表单
                    status = true;
                }
            });
        });
    </script>

使用session 来解决这个问题

1.jpg