SpringMvc框架中ajax防表单重复提交

SpringMvc框架中ajax防表单重复提交

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

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

1.先用maven搭建一个web项目

2.pom.xml

 <!--配置junit依赖 -->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>

    <!--配置servlet依赖 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.0</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.0.8.RELEASE</version>
    </dependency>

    <!--  配置数据库依赖 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.38</version>
    </dependency>

    <!-- 配置mybatis依赖 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.4.6</version>
    </dependency>

    <!-- 配置fastjson依赖 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.7</version>
    </dependency>



//配置资源
<resources>

      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>**/*.xml</include>
        </includes>
      </resource>

    </resources>

 3.配置spring-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">


        <!-- 使用注解开发，必须添加注解扫描器，指定包名，spring会扫描包下的注解 -->
        <context:component-scan base-package="com.liuYongQi.SpringMvc3.controller"></context:component-scan>
        <!-- 使用注解开发，可以使用下面配置来自动注册DefaultAnnotationHandlerMapping与AnnotationMethodHandlerAdapter这两个bean -->
        <mvc:annotation-driven />

        <!-- 只把动态信息当做controller处理，忽略静态信息 -->
        <mvc:default-servlet-handler/>

        <!-- 配置视图解析器 -->
        <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
                <property name="prefix" value="/"></property>
                <property name="suffix" value=".jsp"></property>
        </bean>


</beans>

4.配置web.xml

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>Archetype Created Web Application</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>


  <!--<servlet>
    <servlet-name>springMvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>springMvc</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>-->

  <!--<context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath*:spring-config.xml</param-value>
  </context-param>

  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>-->

  <servlet>
    <servlet-name>springMvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath*:spring-config.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>springMvc</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>

  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>

  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>




</web-app>

5.前端页面

 所需要的js文件

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/10/19
  Time: 21:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery/knockout-3.4.1.js"></script>
    <title></title>
</head>

<script type="text/javascript">
    var s;
    $(document).ready(function() {
        function MyViewModel() {
            var self = this;
            self.username=ko.observable();
            self.password=ko.observable();
            self.save=function () {
                var data=ko.toJSON(self);
                console.log(data);
                // if (parseInt($("#hidden").val())==0&&s!=data) {
                //     s = data;
                //     alert(s);
                //     alert(data);
                //     LoginDemo(data);
                // }else{
                //     alert("please do not submit again!");
                // }
                if (parseInt($("#hidden").val())!=0&&s==data) {
                    alert("please do not submit again!");
                }else{
                    LoginDemo(data);
                    s = data;
                }
            };
        }
        ko.applyBindings(new MyViewModel());
    });
    function LoginDemo(data){
        $.ajax("/login2.do", {
            data: data,
            type: "POST",
            //contentType: "application/json",
            success: function (result) {
                $("#hidden").val(1);

                alert(result);
                //alert($("#hidden").val());
            }
        });
    }

</script>

<body>

 <form action="/login2.do" method="post" >
     <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="提交" style="width:280px"></td>
         </tr>
     </table>
     <input type="hidden" id="hidden" name="token" value="0" />
 </form>
</body>
</html>

6.创建Controller类

package com.liuYongQi.SpringMvc3.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.io.PrintWriter;

/**
 * @ClassName: LoginController
 * @Description: TODO
 * @Author: Administrator
 * @CreateDate: 2018/10/19 21:09
 * @UpdateUser: Administrator
 * @UpdateDate: 2018/10/19 21:09
 * @UpdateRemark: 修改内容
 * @Version: 1.0
 */
@Controller
public class LoginController {
    
    @RequestMapping(value = "/login2")
    public void test2(@RequestBody String data, PrintWriter out){
        System.out.println("ajax防表单重复提交");
        out.write(data);
        out.flush();
        out.close();
    }

}

7.测试

第一次：

第二次做相同的操作：

改动一下在提交：

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

今天的测试就到这里了，谢谢大家的支持！

如果大家想浏览我的下一篇文章，请留言

版权声明：此文章属于原创，不准随意转载：https://blog.csdn.net/LYQ2332826438