The springmvc background intercepts the repeated submission of the form form; the form submits multiple attachments

Others 2022-04-20 20:15:31 views: 0

Idea: A token is stored in a hidden field in the form to be submitted. This token is submitted with the form. If the token is the same as the session, it is successful, and the token in the session is changed to a value. If it is submitted repeatedly, the token will be different.

  1. controller

@Controller
@RequestMapping("wechat")
public class WeChatController {
    Logger log = Logger.getLogger(WeChatController.class);//记录log日志

    @RequestMapping("/toadd")
    public String toadd(Model model,HttpServletRequest request){
        String token1 = TokenProccessor.getInstance().makeToken();//创建令牌
        //System.out.println("在Servlet中生成的token："+token1);
        request.getSession().setAttribute("token", token1);  //在服务器使用session保存token(令牌)
        model.addAttribute("token", token1);
        return "wenjuan";
    }

    @RequestMapping("/addinfo")
    public String addinfo(MdgcContact mdgcContact,MdgcConveyor mc,MdgcCustomer mct,MdgcShip ms,String token,
            @RequestParam(value = "contactBusinessCardPhoto", required = false) MultipartFile contactBusinessCardPhoto,
            @RequestParam(value = "plantPhoto", required = false) MultipartFile plantPhoto,
            @RequestParam(value = "spentBladePhoto", required = false) MultipartFile spentBladePhoto,
            @RequestParam(value = "photo", required = false) MultipartFile photo,
            HttpSession session,HttpServletRequest request,HttpServletResponse response) throws ServletException{
            boolean b = isRepeatSubmit(request,token);//判断用户是否是重复提交(按钮连续快速点击两次)

            //System.out.println("处理用户提交请求！！");
            response.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8"); 
            PrintWriter out = null;
            try {
                out = response.getWriter();
            } catch (IOException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            } 
            try {  
                if(b==true){
                    out.println("<script language='javascript'>");   
                    out.println("alert('请勿重复提交');");  
                    out.print("</script>");
                    return null;
                }
                request.getSession().removeAttribute("token");//移除session中的token

                String token1 = TokenProccessor.getInstance().makeToken();//创建令牌
                //System.out.println("在Servlet中生成的token："+token1);
                request.getSession().setAttribute("token", token1);  //在服务器使用session保存token(令牌)
                if (null != contactBusinessCardPhoto) {
                    String nameString = contactBusinessCardPhoto.getOriginalFilename();
                    System.out.println("======nameString=============="+nameString);
                    System.out.println("======nameString=============="+nameString);
                    System.out.println("======nameString=============="+nameString);
                    System.out.println("======nameString=============="+nameString);
                }

                out.println("<script language='javascript'>");   
                out.println("alert('保存成功');");  
                //out.println("history.back();");   
                out.print("</script>");
            } catch (Exception e) {  
                e.printStackTrace();  
                out.println("<script language='javascript'>");   
                out.println("alert('保存失败');");  
                out.print("</script>");
            }  
            //response.setContentType("text/html; charset=gbk");  

            return null;
    }





    /**
     * 判断客户端提交上来的令牌和服务器端生成的令牌是否一致
     * @param request
     * @return 
     *         true 用户重复提交了表单 
     *         false 用户没有重复提交表单
     */
    private boolean isRepeatSubmit(HttpServletRequest request,String client_token) {
        //1、如果用户提交的表单数据中没有token，则用户是重复提交了表单
        if(client_token==null){
            return true;
        }
        //取出存储在Session中的token
        String server_token = (String) request.getSession().getAttribute("token");
        //2、如果当前用户的Session中不存在Token(令牌)，则用户是重复提交了表单
        if(server_token==null){
            return true;
        }
        //3、存储在Session中的Token(令牌)与表单提交的Token(令牌)不同，则用户是重复提交了表单
        if(!client_token.equals(server_token)){
            return true;
        }

        return false;
    }
}
  1. token class (single-column mode)

public class TokenProccessor {
    /*
     *单例设计模式（保证类的对象在内存中只有一个）
     *1、把类的构造函数私有
     *2、自己创建一个类的对象
     *3、对外提供一个公共的方法，返回类的对象
     */
    private TokenProccessor(){}

    private static final TokenProccessor instance = new TokenProccessor();

    /**
     * 返回类的对象
     * @return
     */
    public static TokenProccessor getInstance(){
        return instance;
    }

    /**
     * 生成Token
     * Token：Nv6RRuGEVvmGjB+jimI/gw==
     * @return
     */
    public String makeToken(){  //checkException
        //  7346734837483  834u938493493849384  43434384
        String token = (System.currentTimeMillis() + new Random().nextInt(999999999)) + "";
        //数据指纹   128位长   16个字节  md5
        try {
            MessageDigest md = MessageDigest.getInstance("md5");
            byte md5[] =  md.digest(token.getBytes());
            //base64编码--任意二进制编码明文字符   adfsdfsdfsf
            BASE64Encoder encoder = new BASE64Encoder();
            return encoder.encode(md5);
        } catch (NoSuchAlgorithmException e) {
            throw new RuntimeException(e);
        }
    }
}
  1. page
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html class="pixel-ratio-2 retina">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery WeUI</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
    content="width=device-width, initial-scale=1, user-scalable=no">

<meta name="description"
    content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
<title>html5问卷调查表</title>
<link rel="stylesheet" type="text/css"
    href="<%=basePath%>static/jQuery WeUI_files/weui.min.css" />
<link rel="stylesheet" type="text/css"
    href="<%=basePath%>static/jQuery WeUI_files/jquery-weui.css" />
<link rel="stylesheet" type="text/css"
    href="<%=basePath%>static/jQuery WeUI_files/demos.css" />

<script type="text/javascript"
    src="<%=basePath%>static/jQuery WeUI_files/jquery-2.1.4.js"></script>
<script type="text/javascript"
    src="<%=basePath%>static/jQuery WeUI_files/fastclick.js"></script>
<style type="text/css">
/*文字靠右样式*/
select {
    direction: rtl;
}

select option {
    direction: ltr;
}
</style>
</head>
<body ontouchstart="">
<!-- enctype="multipart/form-data" -->

    <header class="demos-header">
        <h1 class="demos-title">表单</h1>
    </header>
    <iframe name="formsubmit" style="display:none;"> </iframe>  
    <form id="myform" action="<%=basePath%>wechat/addinfo" method="post" enctype="multipart/form-data" onsubmit="return checked()" target="formsubmit">
        <div id="d1" class="ceshi weui-cells weui-cells_form">

            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">联系人名片照片</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="file" id="contactBusinessCardPhoto"
                        placeholder="联系人名片照片" name="contactBusinessCardPhoto">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">工厂备注</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="工厂备注"
                        name="plantNotes">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">工厂照片</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="file" id="plantPhoto"
                        placeholder="工厂照片" name="plantPhoto">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">扫码序列号</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="扫码序列号"
                        name="assemblySerialNumber">
                </div>
            </div>

            <div class="weui-btn-area">
                <a class="weui-btn weui-btn_primary" href="javascript:"
                    onclick="showdiv('#d2','#d1')">下一页</a>
            </div>
        </div>



        <div id="d2" class="ceshi weui-cells weui-cells_form">

            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label"><span style="color:red">*</span>皮带机运行情况：小时/天</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="皮带机运行情况：小时/天"
                        name="operationScheduleHours" required="required">
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label"><span style="color:red">*</span>每次检修天数</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" pattern="[0-9]*"
                        placeholder="每次检修天数" name="averageOutageDuration"
                        required="required">
                </div>
            </div>
            <div class="weui-cell"></div>
            <div class="weui-cells__title">
                <label class="weui-label"><span style="color:red">*</span>清扫器有无张紧</label>
            </div>
            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label" for="e11">
                    <div class="weui-cell__bd">
                        <p>无</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="tensionnedCleaner"
                            value="0" id="e11"> <span class="weui-icon-checked"></span>
                    </div>
                </label> <label class="weui-cell weui-check__label" for="e12">

                    <div class="weui-cell__bd">
                        <p>有</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="tensionnedCleaner" class="weui-check"
                            id="e12" value="1" checked="checked"> <span
                            class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>




            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">清扫器品牌</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="清扫器品牌"
                        name="assemblyManufacturer">
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">其他清扫器厂家</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="其他清扫器厂家"
                        name="assemblyManufacturerOther">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label"><span style="color:red">*</span>清扫器/刀片物料号</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="清扫器/刀片物料号"
                        name="assemblyDescriptionPartNumber" required="required">
                </div>
            </div>


            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label"><span style="color:red">*</span>已安装的刀片类型</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="已安装的刀片类型" required="required"
                        name="bladeProductLineInstalled">
                </div>
            </div>



            <div class="weui-btn-area">
                <a class="weui-btn weui-btn_primary" href="javascript:"
                    onclick="showdiv('#d1','#d2')">上一页</a>
            </div>

            <div class="weui-btn-area">
                <a class="weui-btn weui-btn_primary" href="javascript:"
                    onclick="showdiv('#d3','#d2')">下一页</a>
            </div>
        </div> 
        <div id="d3" class="ceshi weui-cells weui-cells_form">

            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label"><span style="color:red">*</span>清扫器使用状态</label>
                </div>
                <div class="weui-cell__bd">
                    <select class="weui-select" name="assemblyCondition">
                        <option value="1">新的</option>
                        <option value="2">正常磨损</option>
                        <option value="3">需要修理</option>
                        <option value="4">需要更换</option>
                    </select>
                </div>
            </div>

            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label"><span style="color:red">*</span>刀片磨损情况</label>
                </div>
                <div class="weui-cell__bd">
                    <select class="weui-select" name="bladeCondition">
                        <option value="1">剩余75%-100%磨损周期</option>
                        <option value="2">剩余50%-75%磨损周期</option>
                        <option value="3">剩余25%-50%磨损周期</option>
                        <option value="4">剩余25%以下磨损周期</option>
                        <option value="5">丢失或损坏</option>
                    </select>
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label"><span style="color:red">*</span>下次替换所需的时间（月数）</label>
                </div>
                <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="已安装的刀片类型" required="required"
                        name="monthsUntilReplacementNeeded">

                </div>
            </div>


            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label"><span style="color:red">*</span>皮带宽度(mm)</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" value="" name="beltWidth"
                        required="required">
                </div>
            </div>



            <div class="weui-btn-area">
                <a class="weui-btn weui-btn_primary" href="javascript:"
                    onclick="showdiv('#d2','#d3')">上一页</a>
            </div>
            <div class="weui-btn-area">
                <input type="submit" class="weui-btn weui-btn_primary" value="提交" />
            </div>
        </div>
    </form>





    <script>
        $(function() {
            FastClick.attach(document.body);
        });
    </script>
    <script src="<%=basePath%>static/jQuery WeUI_files/jquery-weui.js"></script>


    <script>
        $("#showTooltips").click(function() {
            var tel = $('#tel').val();
            var code = $('#code').val();
            if (!tel || !/1[3|4|5|7|8]\d{9}/.test(tel)) $.toptip('请输入手机号');
            else if (!code || !/\d{6}/.test(code)) $.toptip('请输入六位手机验证码');
            else $.toptip('提交成功', 'success');
        });

        $(function() {
            $("#d2").hide();
            $("#d3").hide();
        });

        function checked(){
            var flag1 = true;
            $("input[required='required']").each(function() {
                if (null == $(this).val() || isNull($(this).val())) {
                    flag1 = false;
                    return;
                }
            });
            if (!flag1) {
                $.toptip('请输入必填项');
                return flag1;
            }
            return flag1;
        }

        function showdiv(id, nowid) {
            var flag = false;
            $(nowid).find("input[required='required']").each(function() {
                if (null == $(this).val() || isNull($(this).val())) {
                    flag = true;
                    return;
                }
            })
            if (flag) {
                $.toptip('请输入必填项');
                return;
            }
            $(".ceshi").hide();
            $(id).show();
        }
        //判断是否为空或者都是空格
        function isNull(str) {
            if (str == "") return true;
            var regu = "^[ ]+$";
            var re = new RegExp(regu);
            return re.test(str);
        }

    </script>


</body>
</html>

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324416973&siteId=291194637
Recommended
Ranking
#2019110700005
What materials and procedures are required for patent transfer
What is the blockchain Ethereum triplet state root transaction root receipt root
Front-end study notes 04 --- About the insertion of html pictures and videos
Documents required for the filing of WeChat Mini Programs in special industries, the filing process of WeChat Mini Programs in special industries, how to file WeChat Mini Programs in special industries
2017 Qingdao-site tournament I The Squared Mosquito Coil
[BZOJ3165][HEOI2013]Segment (line segment tree without marking)
Kettle series: KettleEasyExpand, an open source Kettle universal plugin by Ma Jinju
The latest tutorial on making framework for iOS
DAX Section 6: Statistical Functions
Daily
More
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

Code World

© 2018 codetd.com