// 02.jQuery.getJSON.js
[
{
"Num": "1",
"Name": "홍길동"
},
{
"Num": "2",
"Name": "백두산"
},
{
"Num": "3",
"Name": "한라산"
}
]
// ----------------------------------------
<script src="../js/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>
';
table += '<td>' + entry["Num"] + '</td>
';
if (entry["Name"]) { // 특정 필드를 비교할 때 이러한 표현법 사용
table += '<td>' + entry["Name"] + '</td>
';
}
table += '</tr>
';
});
table += "</table>
";
$('#pnlDisplay').append(table); // 패널에 추가하기
});
});
});
</script>
<div id="btn">
<div class="btnLoad">HTML읽어오기</div>
</div>
<div id="pnlDisplay">
</div>
|
|
추천 : 