jquery Ajax의 요청이 2번 일어나는 현상, form 안에 button

 

<form>
    <input type="text" name="username">
    <button id="btn-save">저장</button>
</form>

※ <form> 태그 안에 <button>태그가 존재하며, button type을 지정하지않은 상황.

 

let index = {

init: function(){

    $("#btn-save").on("click", ()=>{ 
   
         this.save();
    });

 

해당 코드가 있다고 가정합니다.

<form> 태그 안에 <button> 태그를 선언하였고

save의 onclick 이벤트를 설정하였습니다.

 

 

 $.ajax({
                  type: "POST",
                   url: "/example",
                   data: JSON.stringify(data),
                   contentType:"application/json; charset=utf-8", 
                   dataType:"json" 
                  

             }).done(function(resp){
                     alert("회원가입이 완료되었습니다.");
                     location.href="/";
             }).fail(function(error){
                 alert(JSON.stringify(error));
             });

 

그 후 Jquery의 Ajax를 선언하여

 성공/실패에 따른 alert창이 떠야하지만,

별다른 오류 없이

데이터는 성공적으로 넘어가지만

실행되어야 할 alert창이 뜨지 않습니다.

 

 

이러한 이유는 

 

컨트롤러에 요청이 2번 진행되었기 때문입니다.

 

form태그 내부의 button이 default동작인 submit으로 동작하면서 form동작 + ajax동작이 동시에 일어났기 때문이다.

 

가장 간단한 해결책이 2가지 있는데,

 

1. form 타입 밖으로 button 타입을 꺼낸다.

 

2. button의 타입을 "button"으로 지정하여 default 값인 submit을 억제한다.

 

<form>
    <input type="text" name="username">
    <button id="btn-save" type="button">저장</button>
</form>

 로 간단히 해결