JQuery를 이용한 데이터 출력 방법
1. 개요
프론트엔드 개발 시 ajax 통신을 이용해 외부에서 데이터를 가져와 UI에 값을 넣어주는 방법을 많이 사용한다. 이번 포스팅에는 UI구성이나 특성에 적합한 데이터 출력방법을 알아본다.
2. 구현방법 및 설명
첫번째, 템플릿을 활용한 값 출력a
설명: 복잡한 마크업형태의 묶음으로 구성되어 있고, 반복적으로 ui가 뿌려진다.
참고: jQuery를 이용한 출력에 대한 전반적인 구성이나 기능위주로 설명되기 때문에
css와 같이 레이아웃 관련 내용은 생략한다.
- 데이타 구성
- 파일명 : person.json
var data = [{ name: "홍길동", age: "20", address: "서울", birth: "2016" },
{ name: "이순신", age: "30", address: "부산", birth: "2016" },
{ name: "장영실", age: "25", address: "대구", birth: "2016" },
{ name: "허준", age: "50", address: "광주", birth: "2016" }]
- 메인파일 구성
- 파일 : main.html
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<table>
<tbody id="personUI">
<!--
@ templete
-->
</tbody>
</table>
<!-- 템플릿 -->
<javascript type="text/javascript" id="personUI_tmpl">
<tr>
<td>이름 : ${name}</td>
<td>나이 : ${age}</td>
<td>주소 : ${address}</td>
<td>생일 : ${birth}</td>
</tr>
</javascript>
$(document).ready(function() {
var markup = $("#personUI_tmpl");
$("#personUI").empty();
$(markup).tmpl(data).appendTo("#personUI");
});
</body>
두번째, Form 내 입력필드에 값 설정 및 출력
설명: Form태그로 감쌓여져 있으며 사용자로 부터 값을 입력받을 수 있다.
타입이 같은 입력태그에 값을 설정할 때 유용한 방법이다.
data객체의 키이름과 입력태그의 name 속성 값을 동기화 시켜서 관리한다.
- 데이타 구성
- 파일 : person.json
var data = { id: "test", name: "홍길동", tel: "011000000", hobby: "여행" };
- 메인파일 구성
- 파일 : main.html
<body>
<form>
<input type="text" name="id" />
<input type="text" name="name" />
<input type="text" name="tel" />
<input type="text" name="hobby" />
</form>
$(document).ready(function() {
var list = $("input[type=text]");
$(list).each(function(index){
this.value = data[this.name];
});
});
</body>
세번째, 일반 태그에 값 설정 및 출력
설명: 단순한 텍스트 값만 필요로 하는 곳에 하나의 템플릿을 공통으로 활용하고 싶을 때 활용한다.
이 방법은 클래스의 공통명을 배열로 가져올 수 있는 특징을 이용해서 json데이터 속성과
태그 아이디 값을 동기화 시켜주므로써 데이터 출력을 편리하게 관리 할 수 있다.
- 데이타 구성
- 파일 : person.json
var data = {name: "홍길동", age: "30", address: "서울" };
- 템플릿 구성
<javascript type="text/javascript" id="personUI_tmpl">
<span>${label}</span>
</javascript>
- 메인파일 구성
- 파일 : main.html
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<ui>
<li>이름</li>
<li id="name" class="view-type-textfiled">
<!--
@ templete
-->
</li>
</ui>
<ui>
<li>나이</li>
<li id="age" class="view-type-textfiled">
<!--
@ templete
-->
</li>
</ui>
<ui>
<li>주소</li>
<li id="address" class="view-type-textfiled">
<!--
@ templete
-->
</li>
</ui>
$(document).ready(function() {
var list = $("ul").find(".view-type-textfiled"),
markup = $("#personUI_tmpl");
$(list).each(function(index){
var label = this.id,
data = {label: data[label]};
$("#"+label).empty();
$(markup).tmpl(data).appendTo("#"+label);
});
});
</body>
'자바스크립트' 카테고리의 다른 글
| 04. Node 개발자동화 테스트 Grunt 설치( 맥북에어 ) (0) | 2016.05.22 |
|---|---|
| 03. 자바스크립트 OOP구현과 상속에 대해... (0) | 2016.02.26 |
| 01. scope에 대한 이해 (0) | 2014.06.20 |
| 02. HTML5 Canvas 에서 그리기... (0) | 2012.05.29 |
| 01. HTML5 Canvas 이해... (0) | 2012.04.21 |