[goormedu 강의] 스프링부트 블로그 만들기 05 - 05 회원가입하기 Ajax 요청

해당 글은 groomedu의 스프링부트 나만의 블로그 만들기 강의를 보고 개인적으로 정리한 글입니다.

 

js에서

init:function(){
	$("#btn-save").on("click", ()=>{ //function(){}, ()=>{} this를 바인딩하기 위해서 
		this.save();
	});
},

function을 사용하지 않고 화살표 함수를 사용한 이유

this를 바인딩하기 위해

 

function을 사용하려면 let _this = this();로 선언하고

this를  _this로 치환

 

ajax 선언

** ajax 호출시 default가 비동기 호출

//ajax 호출시 default가 비동기 호출
//ajax 통신을 이용해서 3개의 데이터를 json으로 변경하여 insert 요청
$.ajax({
	type:"POST",
	url:"/blog/api/user", 
	data: JSON.stringify(data), //http body 데이터
	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));
});

 

type은 POST 방식으로 전송할 것임.

data는 json 데이터 형식으로 변환하여 전송.

contentType은 body 데이터가 어떤 타입인지 MIME을 정의

dataType은 서버에 요청하여 문자열로 응답이 오면 javascript object로 변환

 

.done()에서 resp 응답값(javascript object)을 전달받음.