40. 회원가입 하기 Ajax 요청

user.js

ajax 부분 완성시킨다.

let index = {
    init:function(){
        $("#btn-save").on("click",()=>{ // function(){} 대신 ()=> 사용한 이유는 this를 바인딩하기 위해서
            this.save();
        });

    },

    save: function(){
        // alert('user의 save호출됨');
        let data = {
            username: $("#username").val(),
            password: $("#password").val(),
            email: $("#email").val()
        }
        // console.log(data);

        $.ajax({
            type: "POST",
            url: "/api/user",
            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));
        });


    },// save end


}// index end
index.init();

 

UserApiController

@RestController
public class UserApiController {

    @PostMapping("/api/user")
    public int save(@RequestBody User user){
        System.out.println("UserApiController save() 호출");
        return 1;
    }

}

 

ResponseDto

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class ResponseDto <T>{
    int status;
    T data;
}

 

UserApiController

@RestController
public class UserApiController {

    @PostMapping("/api/user")
		public ResponseDto<Integer> save(@RequestBody User user){
        System.out.println("UserApiController save() 호출");
        return new ResponseDto<Integer>(HttpStatus.OK.value(),1);
    }

}