메뉴 건너뛰기

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

JSON(JavaScript Object Notation)

- Key와 Value로 구성
- []를 사용하여 배열형 Value 사용 가능
- JSON 공식 사이트 -
http://json.org/ 
 


"새 항목 추가"로 "Html" 형식의 파일인 [jQuery.getJSON.htm]과 "JScript" 형식의 파일인 [jQuery.getJSON.js]를 만들고 각각 코드를 아래와 같이 작성한다.




[jQuery.getJSON.htm]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>비동기적으로 JSON파일 로드</title>

    <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>       

</head>

<body>

    <div id="btn"><div class="btnLoad">HTML읽어오기</div></div>

    <div id="pnlDisplay">

    </div>

</body>

</html>

 



-------------------------------------------------------------------------------------




[jQuery.getJSON.js]


[

    {

        "Num": "1",

        "Name": "홍길동"

    },

    {

        "Num": "2",

        "Name": "백두산"

    },

    {

        "Num": "3",

        "Name": "한라산"

    }

]

 


-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면. 아래그림에서 'HTML읽어오기'텍스트를 마우스로 클릭하면...





--> 아래그림과 같이 'HTML읽어오기'텍스트 아래에 테이블이 출력된다.



List of Articles
번호 제목 날짜 조회 수
237 HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript file 2014.09.04 6312
236 HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript file 2014.09.04 6288
235 HTML5 드래그 앤 드롭 하기 Drag and Drop file 2014.09.04 7744
234 HTML5 Web Storage -01- file 2014.09.04 5585
233 HTML5 Form 공부하기 -1- file 2014.09.04 5839
232 HTML5 Form 공부하기 -2- file 2014.09.04 6329
231 HTML5로 게임 만들기 워밍업 file 2014.09.04 6063
230 HTML5 Better semantic tags file 2014.09.04 5952
229 HTML5 Geolocation (구글 지도에 현위치 표시하기) file 2014.09.04 6809
228 jQuery ajax post 요청 text 응답 2014.10.16 6701
» JSON(JavaScript Object Notation) - jQuery Ajax - jQuery.getJSON() 메서드 (비동기적으로 JSON파일 로드) file 2014.10.16 6568
226 jQuery Ajax - jQuery.load() 메서드 (동적으로 원격 페이지 로드) file 2014.10.16 6407
225 트리뷰(TreeView) 컨트롤 file 2014.10.16 6719
224 Effects - Stop() 메서드 (애니메이션 효과 멈추기) file 2014.10.16 6225
223 Effects - Animate() 메서드 (여러가지 효과 동시 처리) file 2014.10.16 30454
222 Effects - SlideToggle() 메서드 (슬라이드 업/다운) file 2014.10.16 6757
221 Effects - SlideUp() 메서드 (슬라이드업) file 2014.10.16 5999
220 Effects - FadeIn() / FadeOut() 메서드 (서서히 보이기 및 숨기기) file 2014.10.16 6068
219 Effects - Show() / Hide() 메서드 (보이기 및 숨기기) file 2014.10.16 5957
218 Events - Unbind() 메서드 (이벤트 처리기 해제) file 2014.10.16 5749
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved