let index = {
init: function(){
$("#btn-save").on("click",()=>{ // function(), ()=>{} this 를 바인딩하기 위해서 !!
this.save();
}); // on(이벤트,함수) 이벤트가 발생하면 함수 실행
}
,save: function(){
//alert('user의 save함수 호출됨');
let data = { // joinForm input태그의 id로 값을 가져와서 저장
userName : $("#username").val(),
password:$("#password").val(),
email:$("#email").val()
};
// console.log(data); // {userName: '쫑이', password: '1234', email: 'jjong2@naver.com'} 근데 단순 문자열임
// ajax 호출시 default가 비동기 호출
// ajax 통신을 이용해서 3개의 데이터를 json으로 변경하여 insert요청!!
// ajax가 통신을 성공하고 서버가 json을 리턴해주면 자동으로 자바 오브젝트로 변환해준다.
// dataType:"json" => 생략해도 됨
$.ajax({
// 회원가입 수행 요청
type:"POST",
url:"/blog/api/user",
data:JSON.stringify(data), // 데이터를 JSON형식으로 보낸다.
contentType: "application/json; charset=UTF-8", // body 데이터가 어떤 타입인지(MIME)
dataType:"json" // 요청을 서버로 해서 응답이 왔을 때 기본적을 문자열 (생긴게 json이라면 ) => javaScript 오브젝트로 변환
}).done(function(resp){
alert("회원가입이 완료되었습니다.");
console.log(resp)
location.href="/blog";
}).fail(function(error){
alert(JSON.stringify(error));
}); // ajax 통신을 이용해서 3개의 데이터를 JSON으로 변경하여 insert 요청!!
// 이 뒤에 어떤 함수가 선언된다면 비동기통신이기 때문에 ajax와 같이 실행된다.
// ajax를 실행 한 후, 동작하는것이 아니다.
}
}
index.init();
Controller 생성
UserApiController
@RestController
public class UserApiController {
@PostMapping("/api/user")
public ResponseDto<Integer> save(@RequestBody User user) {
System.out.println("UserApiController : save 호출됨");
// 실제로 DB에 insert를 하고 아래에서 return이 되면 된다.
return new ResponseDto<Integer>(HttpStatus.OK, 1); // 자바오브젝트를 JSON으로 변환해서 리턴(Jackson)
}
}
DTO 생성
@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class ResponseDto<T> {
HttpStatus status;
T data;
}
