SpringMVC 表单防止重复提交(Ajax提交方式)

来源：互联网发布：mac无法更新10.12.6 编辑：程序博客网时间：2024/05/16 06:25

SpringMVC 中如果使用了knockoutJs前端开发框架，在表单提交的时候只需要把ViewModel中的数据以Ajax提交的方式提交到后台进行处理，这时候我们需要在前端做防止重复提交。这种防止重复提交只能防止在页面未刷新立即进行的提交，虽然不能够解决防止重复提交的所有情形，但是结合后端验证，还是可以解决一部分问题。

后端防止重复提交的做法是查询该表单中必填数据是否已在数据库中存在，否则不允许提交。这两种防止重复提交的方式结合，就能够做到确保不存在冗余数据。对于数据的验证也可以采用前后端验证结合，这样就更加能够确保数据的合理性。前端验证可以使用knockout的验证功能，或者自己结合控件的事件来做。后端验证可以结合Hibernate的注解的方式实现模型的验证。

1.前端页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <title>Post Demo</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="Jquery/jquery-1.10.2.min.js"></script><script type="text/javascript" src="Jquery/knockout-3.3.0.js"></script><link rel="stylesheet" href="Jquery/bootstrap.min.css" type="text/css"></link>  <script type="text/javascript" src="Jquery/bootstrap.min.js"></script>  <script type="text/javascript">  $(document).ready(function(){    function MyViewModel() {            var self = this;                        self.username = ko.observable();            self.password = ko.observable();            self.save = function () {            //JSON OBJECT            var data = ko.toJSON(self);            //JSON            //var d = JSON.stringify(data);            console.log(data);            //first time submit            if(parseInt($("#hidden").val()) == 0){            LoginDemo(data);            }            //second time            else{            alert("please do not submit again.");            }            };        }                ko.applyBindings(new MyViewModel());                /*        $("#loginDemo").click(function(){        $("form").submit();        });        */  });    function LoginDemo(data){  $.ajax("LoginDemo.do", {            data: data,                type: "POST",                //contentType: "application/json",                success: function (result) {                 $("#hidden").val(1);                    alert(result);                     //alert($("#hidden").val());                }            });  }  </script>  </head>    <body>  <br>  <br>  <div class="container">  <!--    <form action="LoginDemo.do" method="post" class="form-horizontal templatemo-create-account templatemo-container">  <table>  <tr>  <td><span>Username:</span></td>  <td><input type="text" name="username" data-bind="value: username"></td>  </tr>  <tr>  <td><span>Password:</span></td>  <td><input type="password" name="password" data-bind="value: password"></td>  </tr>    <tr>  <td colspan="2"><input type="submit" id="loginDemo" data-bind="click: save" value="Demo" style="width:280px"></td>  </tr>  </table>  <input type="hidden" id="hidden" name="token" value="0" />  </form>  -->  <table>  <tr>  <td><span>Username:</span></td>  <td><input type="text" name="username" data-bind="value: username"></td>  </tr>  <tr>  <td><span>Password:</span></td>  <td><input type="password" name="password" data-bind="value: password"></td>  </tr>    <tr>  <td colspan="2"><input type="submit" id="loginDemo" data-bind="click: save" value="Demo" style="width:280px"></td>  </tr>  </table>  <input type="hidden" id="hidden" name="token" value="0" />  </div>  </body></html>

说明:

页面中有两种表单方式：

1）一种是使用form的形式，这种形式的表单提交直接采用$("form").submit()的方式，后端我们采用实体类来接收传递到后台的值；

2）第二种是不使用表单的形式，这种形式下，我们把表单所绑定的数据源提交到后台，数据源是一个json对象，使用jackson来解析json成一个对象，然后就可以直接操作对象了。

3）前端防止重复提交，采用隐藏的hidden的方式，第一次提交成功并返回值后改变hidden的值，每次提交则校验当前值是否和初始值相同，如果相同则允许提交，否则不允许提交。

2.后端代码

@RequestMapping(value = "/LoginDemo.do",method = RequestMethod.POST)//@ResponseBodypublic void LoginDemo(@RequestBody String data,HttpServletRequest request,HttpServletResponse response){PrintWriter pw;System.out.println(data);try {pw = response.getWriter();pw.print(data);pw.flush();pw.close();} catch (IOException e) {e.printStackTrace();}}

3.效果

1 0