게시판 만들기 - ajax통신으로 회원가입

1.  데이터들을 Form으로 감싸고 id값을 준다.

2. Ajax 작성

먼저 아래와 같은 형식으로 만들고 시작한다.

 

type : post

 

응답받을때의 데이터 타입

dataType: json - 데이터타입은 무조건 json으로 한다.

 

지금내가 전송할 데이터를  stringify에 담는다.

키값은 data이다.

최종코드

   let isUsernameSameCheck = false;

   
   // 회원가입
   $("#btnJoin").click(()=>{
      if(isUsernameSameCheck == false){
         alert("유저네임 중복 체크를 진행해주세요");
         return;
      }
      
      // 0. 통신 오브젝트 생성
      let data = {
            username: $("#username").val(),
            password: $("#password").val(),
            email: $("#email").val()
      };
      
      
      
      $.ajax("/join",{
         type: "POST",
         dataType: "json",
         data: JSON.stringify(data),
         headers : {
               "Content-Type" : "application/json"
         }
      }).done((res)=>{
         if(res.code == 1){

            location.href = "loginForm";
         }
      });
   });

 

 

3. Controller 작성

join은 이제 데이터를 return해줘야하기때문에 @ResponseBody를 붙여준다.

new CMRespDto<>(1, "회원가입성공", null);   형태의 데이터 json을 return을 할것이다.

ajax통신은 모두 데이터로 return을 해야한다.

 

결과확인