티포의개발일지

전 글에서 말했다시피 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');
	}
});

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

1년동안 JQuery를 써 본 결과, JQuery는 정말 Object와 Ajax가 다 먹여살린다고 느꼈다.

페이지 내부에서 필요한 객체를 만들고, 객체에 변경사항이 적용되야 할 일이 생길 때마다 Ajax로 원하는 부분만 새로고침 시켜주면 왠만한 기능은 모두 구현할 수 있었다.

블로그의 Node.js - JQuery 글만 봐도 페이지네이션을 하거나 쇼핑몰을 만들거나 할 때 결국은 페이지 내부에서

 Object를 만들고, 필요할 때마다 Ajax로 백엔드와 통신하도록 설계하였다.

Object를 선언하는 방법은 굉장히 쉽다.

HTML 파일 내부 script쪽에 선언을 해주면 된다.

<script>
var newObject = new Object({name : "Teepo" ,age : 28}}
</script>

이런식으로 원하는 Object의 이름을 선언하고( newObject ), 객체 안에 필요한 속성들을 같이 생성자로 선언해주면 된다. 객체의 변화가 필요할 경우에 함수를 만들어주는데, 보통 get, set 함수가 자주 쓰이니 중요한 두 개를 설명하겠다.

<script>
function getObject(newObject) {
	console.log(newObject.name);
	console.log(newObject.age);
}
</script>

<script>
function setObject(name, age) {
	newObject.name = name;
	newObject.age = age;
}
</script>

이런식으로 input태그 onClick옵션에 함수를 넣어 객체를 원하는대로 조정할 수 있다.