Form태그와 Ajax의 충돌

프로젝트 중에 user data를 백엔드로 보내는 작업을 했다. data가 넘어간 후 DB가 업데이트 되는 것까지 확인되었는데, redirect가 이뤄지지 않아서 user가 회원가입 페이지에 머무르는 버그가 발생하였다.

왜 그럴까?

---

Ajax 요청을 보내는 과정에서 Form 태그와 충돌하는 경우가 있다.

$.ajax({
  url: '/api/etc',
  method: 'POST',
  success: function(data) {
    성공했을시 callback func -> **이 부분이 실행되지 않는다.**
  }
}); 

Form 태그는 기본적으로 submit 이벤트가 발생하면 폼 데이터를 서버로 전송하는데, 이때 Ajax 요청이 발생하면 폼 데이터 전송이 중복되는 문제가 발생할 수 있다.

• 현재 프로젝트 내부에서 ajax 콜백 함수가 작동하지 않는 현상이 발생하였다.
• 확인 해본 결과 form 태그의 submit 이벤트와 onclick(ajax)이벤트가 중복되어 콜백 함수가 실행되지 않는 것을 확인하였다.

결론

• form 태그와 ajax는 함께 쓰지 않는다.
• 나의 경우에는 ajax를 사용하여 json으로 넘기는 방식을 채택했다.
  • form을 사용하지 않을경우에는 엔터로 버튼을 클릭하지 못하는 경우가 생김
  • 엔터를 따로 지정하여 해결하면 된다.