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

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

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

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

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

2.pom.xml

 
    
      junit
      junit
      4.12
      test
    

    
    
      javax.servlet
      javax.servlet-api
      4.0.0
      provided
    

    
      org.springframework
      spring-webmvc
      5.0.8.RELEASE
    

    
    
      mysql
      mysql-connector-java
      5.1.38
    

    
    
      org.mybatis
      mybatis
      3.4.6
    

    
    
      com.alibaba
      fastjson
      1.2.7
    



//配置资源


      
        src/main/java
        
          **/*.xml
        
      

    

 3.配置spring-config.xml

4.配置web.xml

  Archetype Created Web Application
  
    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp
  


  

  

  
    springMvc
    org.springframework.web.servlet.DispatcherServlet
    
      contextConfigLocation
      classpath*:spring-config.xml
    
    1
  

  
    springMvc
    *.do
  

  
    encodingFilter
    org.springframework.web.filter.CharacterEncodingFilter
    
      encoding
      UTF-8
    
  

  
    encodingFilter
    /*
  

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" %>



    
    
    
    






 

     

         

             
Username:
             

         
         

             
Password:
             

         

         

             

         
     
     
 

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