메뉴 건너뛰기

?

단축키

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읽어오기'텍스트 아래에 테이블이 출력된다.



  1. No Image 15Dec
    by
    2015/12/15 Views 6894 

    Android] 안드로이드 홈 디렉토리 알아내기

  2. No Image 14Dec
    by
    2015/12/14 Views 8805 

    안드로이드 로그인유지 코드

  3. Android Push GCM 서버 구성 하기(3)

  4. 안드로이드 EditText 필터링 검색

  5. 안드로이드 EditText 필터링 검색 구현(adapter.getFilter().filter(cs))

  6. JAVA JDBC를 사용하여 MySQL과 연동

  7. 안드로이드 로그인 화면 만들기

  8. [안드로이드] 리스트 뷰의 한 항목에 대한 컨텍스트 메뉴 만들기

  9. [안드로이드] 빠르게 사용할수 있는 컨텍스트 메뉴 만들기

  10. [안드로이드] 팝업메뉴 사용법

  11. [안드로이드] 콘텍스트 메뉴 사용예제

  12. No Image 17Aug
    by
    2015/08/17 Views 8860 

    안드로이드 기본어플 예제 어플소스 모음

  13. [안드로이드 강좌] 초보자들이 많이 하는 실수

  14. No Image 11Aug
    by
    2015/08/11 Views 7576 

    manifest 의 launchMode 속성

  15. Android Navigation Drawer API 공개! 디자인 가이드 살펴보기

  16. 내가 입력한 글자 Toast로 나오게 하기

  17. 버튼 누르면 이미지 바꾸기

  18. No Image 26Jul
    by
    2015/07/26 Views 9204 

    화면 전환해도 데이터 유지 예제

  19. No Image 26Jul
    by
    2015/07/26 Views 10088 

    안드로이드 채팅 소스 샘플

  20. No Image 26Jul
    by
    2015/07/26 Views 7576 

    안드로이드 로딩화면 샘플

Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved