JQuery | Ajax

전 글에서 말했다시피 JQuery에서는 Object와 Ajax가 핵심이라고 했다.

이번에는 Ajax에 관하여 알아보자.

 

먼저 script에 jquery를 추가해야한다.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>

 

그 다음 사용하고자 하는 부분에 ajax를 사용한다.

 

$.ajax({
	type: 'POST',
	url: '/shop/test',
	data: DATA,
})

 

기본적인 형식은 이렇게 되어있다.

type은 값을 보내는 메소드의 종류 (ex GET, POST )

url은 보내고자하는 url주소

data는 보내고자하는 데이터이다.

 

백엔드에 이러한 데이터를 보내고 난 후 원하는 값을 받고자 할 때는 뒤에 .done함수를 실행한다.

( 보통 res.send나 res.json으로 받을 경우 )

 

$.ajax({
	type: 'POST',
	url: '/shop/test',
	data: DATA,
}).done(function(data) {
	console.log(data)
	if(data.result == "success") {
		alert('upload');
	}
	else {
		alert('fail');
	}
});

 

데이터의 값에 따라 프론트쪽에서 어떤 행위를 할 것인지 정해놓으면 끝이다.