57.jQuery - getJSON ( 09.Ajax )
- Key와 Value로 구성
- []를 사용하여 배열형 Value 사용가능
- JSON 공식 사이트 : http://json.org
| 02.jQuery.getJSON.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>비동기적으로
JSON파일 로드</title>
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ $("#btn
.btnLoad").click(function()
{ $.getJSON("02.jQuery.getJSON.js", function(data) { $('#pnlDisplay').empty(); //패널(div)의 내용 초기화 var
table = "<table border='1'><tr><td>인덱스</td><td>번호</td><td>이름</td></tr>"; //data를 탐색 : each() 메서드를 사용해서 데이터가 있는 만큼 반복 $.each(data, function(index, entry) { table += '<tr>'; table += '<td>' + index + '</td>'; //index 번호 자체 table += '<td>' + entry["Num"]
+ '</td>'; if (entry["Name"])
{ //특정 필드를 비교할 때 이러한 표현법 사용
table += '<td>' + entry["Name"]
+ '</td>'; } table += '</tr>'; }); table += "</table>"; $('#pnlDisplay').append(table); //패널에 추가하기 }); });
});
</script> </head> <body>
<div id="btn"><div class="btnLoad">HTML읽어오기</div></div>
<div id="pnlDisplay">
</div> </body> </html> |
구성화면
[
{
"key1" :
"value"
"key1" :
["item2", "item2"]
},
{
"key1" :
"value"
"key1" :
["item2", "item2"]
}
]
: Ajax에서는 JSON을 가장 많이 사용한다.
주의사항
1. JSON은 데이터 파일로 주석을 넣으면 된다.
2. 공백 넣으면 안됨.
3. 정말 간단하지만 주의사항 반드시 조심하자!
| 02.jQuery.getJSON.js [ JScript.js파일 ] |
|
[
{
"Num"
: "1",
"Name"
: "정지윤"
},
{
"Num": "2",
"Name": "한승연"
},
{
"Num": "3",
"Name": "최강희"
} ] |
| 결과화면 |
[그림57-1] |
02.jQuery.getJSON.htm
02.jQuery.getJSON.js