728x90
반응형
SMALL
*JSON이란
- Javascript Object Notion의 줄임말
- 자바스크립트 Object 형태의 경량의 데이터 포멧 :자바스크립트로 파생되었지만 독립형 데이터 포멧
- 서로 다른 시스템 간 객체를 교환할 수 있음 : 자바스크립트 - 서버 간 통신할 때 유용(AJAX)
- 사람, 기계 모두 이해하기 쉽고 용량이 작음
- key - value 형식 : { key: value } : 문자열은 ""로 묶어야하며, 배열은 [ ]
- item.json
[
{
"id": "1",
"name": "레몬",
"price": " 3000",
"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": "수분이 풍부한 과일이다."
}
]
- json.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json.html</title>
<style type="text/css">
td{
border : 1px solid gray;
}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$.getJSON("item.json" , function(data, textStatus){
//alert(data);
//alert(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>"
);
}); // each
}); // getJSON
}); // function
</script>
</head>
<body>
<h3>과일의 특성 조사 자료</h3>
<table id="treeData">
</table>
</body>
</html>
- 결과
- JSON 객체
json객체라는 것도 있는데요~ㅎㅎ
- json 객체 : JSON을 다루는 메서드 포함
- IE6 이하 버젼부터는 JSON 객체를 지원하지않음 : 따로 코드를 삽입해야함
- 메서드
1) JSON.parse() : 문자열을 JSON으로 변환
2) JSON.stringify() : JSON을 문자열로 변환
- 참고링크
자바스크립트 json 객체 - https://jinbroing.tistory.com/156
728x90
반응형
LIST
'IT 관련,, > Java관련 언어들' 카테고리의 다른 글
| [웹/JSP]jsp model1 간단한 도서관리게시판-2(dao, select문) (0) | 2020.08.08 |
|---|---|
| [웹/JSP]jsp model1 간단한 도서관리게시판-1(bean, oracle설정) (0) | 2020.08.08 |
| [웹/jQuery]ajax에 대한 내용~!! (0) | 2020.08.02 |
| [웹/JS]자바스크립트 function사용해서 페이지 넘기기~!! (0) | 2020.07.24 |
| [웹/JS]자바스크립트 경고창에 대한 내용들~!! (0) | 2020.07.17 |