<form>
<input type="text" name="user_name">
<button id="save">저장</button>
</form>
과 같은 코드가 있을때 jquery를 활용하여
아래처럼 클릭이벤트에 따른 ajax동작을 정의하고, 비동기처리를 하려고 한다.
$("#save").click(function(){
...ajax 동작
})
ajax에서는 user_name값을 파라미터로 가지고 컨트롤러로 넘겨서 DB에 저장하는 로직을 구성하였는데,
컨트롤러에 요청이 2번씩 가는 현상을 한번씩 볼 수 있다.
form태그 내부의 button이 default동작인 submit으로 동작하면서 form동작 + ajax동작이 동시에 일어났기 때문이다.
가장 간단한 해결책은 button을 submit이 아닌 button이라고 지정을 해주는 것이다.
type="button" 지정하기
<button type="button" id="save">저장</button>
또는 form태그 내부의 모든 버튼이 submit 동작을 하지 않도록 form태그에 속성을 추가하면 된다.
form태그 자동 submit 끄기 (autocomplete="off")
<form autocomplete="off">
...
</form>
