JSON 이용하기
JSON: JavaScript Object Notation
XML 데이터를 대신하기 위해서 사용한다.
키와 값을 쌍으로 가지는 구조
배열을 사용할 경우에는 대괄호 안에 중괄호를 사용하여 조합
1. JSON에 저장되는 정보의 형태
1) 배열
대괄호 안에 값을 콤마로 구분하여 나열하며, 대괄호 안에 나오는 순서대로 배열 요소의 순서가 매겨진다.
[1, 2, 3]
2) 객체
중괄호 안에 있는 이름: 값의 형태로 멤버 하나를 표현
각 멤버는 콤마로 구분
순서가 아닌 이름으로 읽기 때문에 멤버의 순서는 의미가 없다.
{"name": "레몬" }
[
{
"id": "1",
"name": "레몬",
"price": " 3000",
"description": "레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. "
},
{
"id": "2",
"name": "키위",
"price": " 2000",
"description": "비타민C가 매우 풍부하다."
}
]
json 파일 첨부
item.json2. Ajax로 JSON 이용하기
$.getJSON(url[, data][, success])
JSON으로 표현한 데이터를 파일에 저장해 두었다가 필요할 경우 이를 로드 하는 전역 메소드
예제) Ajax를 이용하여 위의 item.json을 불러오는 html 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON 이용하기</title>
<style>
td{border:1px solid;#ccc;}
</style>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
$.getJSON('item.json', function(data, textStatus) { // 콜백함수
$("#treeData").append(
"<tr><td>id</td><td>name</td><td>price</td><td>description</td></tr>");
$.each(data, function() {
$("#treeData").append(
"<tr><td>" + this.id + "</td>" +
"<td>" + this.name + "</td>" +
"<td align='right'>" + this.price + "</td>" +
"<td>" + this.description + "</td></tr>");
});
});
});
</script>
</head>
<body>
<table id="treeData">
</table>
</body>
</html>
| id | name | price | description |
| 1 | 레몬 | 3000 | 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. |
| 2 | 키위 | 2000 | 비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다. |
| 3 | 블루베리 | 5000 | 블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다. |
| 4 | 체리 | 5000 | 체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다. |
| 5 | 메론 | 5000 | 메론에는 비타민A와 칼륨이 많이 포함되어 있다. |
| 6 | 수박 | 15000 | 수분이 풍부한 과일이다. |
예제) $.getJSON으로 Flickr에서 이미지 얻기
Flicker는 JSON 방식이기 때문에 Ajax의 getJSON으로 이미지를 불러올 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON으로 Flickr에서 이미지 얻기</title>
<style>
img{height:200px;}
</style>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?"
+ "tags=raccoon&tagmode=any&format=json&jsoncallback=?",
function(data) {
$.each(data.items, function(i, item) { // i는 index값
$("<img/>").attr("src", item.media.m).appendTo("#images");
if (i == 4) // 이미지는 5개 출력 (0, 1, 2, 3, 4)
return false;
});
});
});
</script>
</head>
<body>
<div id="images">
</div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| Ajax: serialize(), serializeArray() (0) | 2016.03.22 |
|---|---|
| Ajax에서 스크립트 로드하기 $.getScript() (0) | 2016.03.22 |
| JQuary로 Ajax 구현하기 (0) | 2016.03.21 |
| Ajax (Asynchronous JavaScript and XML) (0) | 2016.03.21 |
| 클릭시 이미지와 가격 텍스트가 바뀌는 예제 (0) | 2016.02.22 |
