[Double Submit 방지] ajax, submit 더블 써밋 방지

ajax와 submit은 연속으로 데이터 요청 시 서버 부하가 일어날 수 있다.

따라서 써밋이 중복적으로 들어가는 것을 방지하는 방법이다.

복사가능한 소스코드는 하단부에 있습니다.

여러 방법이 있겠지만 더블써밋 플래그값을 설정하여 하는 방법으로 해보았다.

개발환경은 STS4 스프링 레거시 프로젝트 MVC

▶ 스프링 레거시 프로젝트 MVC

▶ jsp 예제 소스 작성 [전체소스는 하단부 참고]

▶ 테스트용 컨트롤러 작성

저는 home.jsp를 그대로 사용했기 때문에 리다이렉트:/ 해주겠습니다.

컨트롤러는 개발환경에 알맞게 작성해주세요~

▶ 자바스크립트 작성

더블써밋 플래그변수로 false 를 부여한 후에 넘기기 버튼을 누르게 되면서 submit을 타게 되면 true가 된다 !

그럼 submit이 처리중일떄 아무리 넘기기버튼을 눌러도 넘기기 중입니다 라고 뜨고,

써밋이 중복되서 실행되지 않게 된다.

여러번 클릭하게되면 설정해두었던 alert창이 뜨게 됩니다.

써밋이 처리되고 나면 리로드되기때문에 플래그는 다시 false가 되서 넘기기 버튼이 활성화됩니다.

▶ alert 넘기기 중입니다.

▶ ajax 더블써밋 방지

ajax는 리로드 되지않는 비동기이기때문에 ajax처리 후 다시 더블써밋 플래그를 false로 줘야합니다.

ajax 소스코드는 그냥 예제용이고 실질적으로 소스가 돌아가지는 않습니다 !!

※※※※ 써밋이 너무 빠르게 지나가서 아무리 클릭해도 넘기기 중이 안뜰경우 ※※※※

빠른 써밋때문에 테스트가 불가능하면 submit에 1초를 임의로 줘서 해보셔도 됩니다 !

▶ 더블써밋 방지 소스코드

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page session="false" %> <html> <head> <title>Home</title> </head> <body> <form method="POST"> 아이디 : <input type="text"> <br> 닉네임 : <input type="text"> <br> 폰번호 : <input type="text"> <br> 집번호 : <input type="text"> <br> <button type="button" onclick="submitTest(this.form)"> 넘기기 </button> </form> </body> <script type="text/javascript"> var doubleSubmitFlag = false; // 더블써밋 방지에 대한 플래그값 function submitTest(form) { if(doubleSubmitFlag){ // true가 됐기때문에 더이상 submit을 탈 수 없다. alert('넘기기 중 입니다.'); return false; }else { doubleSubmitFlag = true; // 더블써밋 방지 플래그값이 true가 된다. form.action="/test"; form.submit(); } } </script> </html>

▶ ajax 더블써밋 소스코드 예제

// ajax에서의 더블써밋 방지 var doubleSubmitFlag = false; if(doubleSubmitFlag){ // 더블써밋 플래그가 true가 되면 '처리중' 실행 alert('처리중입니다.'); return false; } else { doubleSubmitFlag = true; // ajax 실행시 플래그값 ture $.ajax({ url : url, type : 'POST', data : data, dataType: "json", contentType: false, processData: false, success : function(data){ alert('성공'); } ,beforeSend:function(){ } ,complete:function(){ } ,error:function(data){ } }); doubleSubmitFlag = false; // ajax 프로세스가 끝나면 다시 false }

'스프링 웹 개발' 카테고리의 다른 글

[네이버 지도 api (2)] 마커 클릭시 정보창 띄우기 - 스프링 + 자바스크립트 (1)	2021.06.29
[네이버 지도 api (1)] 지도 생성 후 마커 이미지 넣기 - 스프링 + 자바스크립트 (12)	2021.06.22
[java 이미지 리사이즈] 자바를 활용한 이미지 용량 줄이기 (0)	2021.06.08
[mybatis] There is no getter for property named : 파라미터 하나 일때 에러 (0)	2021.06.03
[smtp] 자바에서 네이버 이메일 전송하기 (2)	2021.05.19

배추잠자리 개발 RPG

[Double Submit 방지] ajax, submit 더블 써밋 방지_ 자바스크립트

'스프링 웹 개발' 카테고리의 다른 글

댓글

티스토리툴바

[Double Submit 방지] ajax, submit 더블 써밋 방지_ 자바스크립트

'스프링 웹 개발' 카테고리의 다른 글

관련글

댓글

티스토리툴바