JSON
- JSON은 JavaScript Object Notation의 약어로 XML 데이터를 대신하기 위해 사용된다.
- JSON은 키와 값을 쌍으로 가지는 구조이다.
- 배열을 사용할 때는 대괄호( [ ] ) 안에 중괄호 ( { } )를 사용하여 조합한다.
- jQuery에서는 JSON으로 표현한 데이터를 파일에 저장해 두었다가
필요할 때 이를 로드할 수 있는 $.getJSON( ) 함수를 제공한다.
- 서버로부터 get 방식의 요청을 하고, 응답을 JSON 형식으로 받기 위해서 $.getJSON( ) 함수를 사용한다.
- $.getJSON( )함수의 첫번째 매개변수는 서버의 url주소를 지정한다. ( 'item.json' )
- 서버로 요청이 성공적으로 완료되면, 두번째 매개변수로 기술한 콜백함수가 호출된다. (function( data. textStatus))
콜백함수의 첫번째 매개변수인 data는 서버에서 돌려 받은 JSON 객체 형식의 데이터고,
두번째 매개변수인 textStatus는 성공일때 "success"라는 문자열이 전달된다.
ex)
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.getJSON('item.json', function(data, textStatus) {
// 서버 url , 콜백함수
// alert(data);
// alert(textStatus); success
$("#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>
item.json 파일로 저장
[
{
"id": "1",
"name": "레몬",
"price": " 4000",
"description": "레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다."
},
{
"id": "2",
"name": "키위",
"price": " 2000",
"description": "비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다."
},
{
"id": "3",
"name": "블루베리",
"price": " 5000",
"description": "블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다."
},
{
"id": "4",
"name": "체리",
"price": " 5000",
"description": "체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다."
},
{
"id": "5",
"name": "메론",
"price": " 5000",
"description": "메론에는 비타민A와 칼륨이 많이 포함되어 있다."
},
{
"id": "6",
"name": "수박",
"price": "15000",
"description": "수분이 풍부한 과일이다."
}
]
'Study_web > Ajax' 카테고리의 다른 글
| Ajax(Asynchronous JavaScript and XML) - 예제 1 (0) | 2021.01.28 |
|---|---|
| Ajax(Asynchronous JavaScript and XML) - (1) 특징, 장단점 (0) | 2021.01.27 |
