Web Front-end/javaScript

Ajax통신을 활용한 json 데이터 불러오기(get 방식)

develop_study 2021. 12. 9. 17:48
반응형

ajax를 이용하여 json데이터를 불러오는 방법을 알아보도록 하겠습니다.

그림과 같이 버튼을 누르면 json데이터를 불러옵니다.

짱쉬움

 

 

 

 

 

 

xmlHttpRequest, axios , fetch 등 다양한 방법이 있지만 

본 게시글에서는 ajax를 쓰기위해 제이쿼리를 사용하도록 하겠습니다.

<HTML>

 

제이쿼리를 써야하므로 html 헤드 영역에 아래와 같은 소스를 삽입하겠습니다.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>
</head>

 

 

본문 내용은 다음과 같이 작성해보겠습니다.

<body>
    <table>
        <thead>
            <tr>
                <td>순번</td>
                <td>이름</td>
                <td>전화번호</td>
                <td>주소</td>
                <td>상태</td>
                <td>비고</td>
                <td>날짜</td>
            </tr>
        </thead>
        <tbody class="table_body">

        </tbody>
        <button type="button" onclick="getJSON()"> json 불러오는 버튼</button>
    </table>
</body>

별다른건 없고 테이블 내용에 table_body라고 class명을 주었습니다.

버튼을 클릭하면 getJSON()이라는 자바스크립트 함수가 실행됩니다.

 

 

<JavaScript>

    <script>

        function getJSON() {
                $.ajax({
                type:"get",
                url:"data.json",
                dataType:"json",
                success: function(data){
                    console.log("통신성공");
                    console.log(data);
                    str = '<TR>'; 
                        $.each(data , function(i){
                            str += '<TD>' + data[i].no + '</TD>
                            	   <TD>' + data[i].name + '</TD>
                                    <TD>' + data[i].tel + '</TD>
                                    <TD>' + data[i].addr + '</TD>' +
                                   '<TD>' + data[i].status + '</TD>
                                   <TD>' + data[i].comment + '</TD>
                                   <TD>'+ data[i].date + '</TD>';
                            str += '</TR>';
                        });
                    $('.table_body').append(str);
                },
                error:function(){
                    console.log("통신에러");
                }
            })
        }

    </script>

 

별다른건 없고 제이쿼리의

$.each() 반복문을 이용하여 받아온 data값을 배열형태로 받아와서

각 key값에 해당하는 value값을 뿌려주는 형태입니다.

클래스명 table_body에

선택한 요소의 아래에 내용을 추가하는 명령어인 .append()로 뿌려줍니다.

 

 

난잡해보이지만 기본형은 아래 코드와 같습니다. 

$.ajax({ //jquery ajax
    type:"get", //get방식으로 가져오기
    url:"data.json", //값을 가져올 경로
    dataType:"json", //html, xml, text, script, json, jsonp 등 다양하게 쓸 수 있음
    success: function(data){   //요청 성공시 실행될 메서드
        console.log("통신성공");
    },
    error:function(){		 //요청 실패시 에러 확인을 위함
        console.log("통신에러");
    }
})

 

<data.json>

json은 기본적으로 {key : value} 형식을 갖습니다.

쌍따옴표"" 안에 값이 들어가야합니다. 

 

[{
	"no":1,
	"name":"한국인",
	"tel":"123-4567",
	"addr":"서울특별시",
	"status":"좋음",
	"comment":"특이사항 없음",
	"date":"12월 9일"
},
{
	"no":2,
	"name":"중국인",
	"tel":"123-4567",
	"addr":"서울특별시",
	"status":"좋음",
	"comment":"특이사항 없음",
	"date":"12월 9일"
},
{
	"no":3,
	"name":"미국인",
	"tel":"123-4567",
	"addr":"서울특별시",
	"status":"좋음",
	"comment":"특이사항 없음",
	"date":"12월 9일"
},
{
	"no":4,
	"name":"일본인",
	"tel":"123-4567",
	"addr":"서울특별시",
	"status":"좋음",
	"comment":"특이사항 없음",
	"date":"12월 9일"
},
{
	"no":5,
	"name":"아이유",
	"tel":"123-4567",
	"addr":"서울특별시",
	"status":"좋음",
	"comment":"특이사항 없음",
	"date":"12월 9일"
},
{
	"no":6,
	"name":"BTS",
	"tel":"123-4567",
	"addr":"서울특별시",
	"status":"좋음",
	"comment":"특이사항 없음",
	"date":"12월 9일"
},
{
	"no":7,
	"name":"블랙핑크",
	"tel":"123-4567",
	"addr":"서울특별시",
	"status":"좋음",
	"comment":"특이사항 없음",
	"date":"12월 9일"
},
{
	"no":8,
	"name":"여자친구",
	"tel":"123-4567",
	"addr":"서울특별시",
	"status":"좋음",
	"comment":"특이사항 없음",
	"date":"12월 9일"
},
{
	"no":9,
	"name":"에스파",
	"tel":"123-9876",
	"addr":"부산광역시",
	"status":"보통",
	"comment":"특이사항 없음",
	"date":"12월 9일"
},
{
	"no":10,
	"name":"오마이걸",
	"tel":"123-7894",
	"addr":"대전시",
	"status":"보통",
	"comment":"특이사항 없음",
	"date":"12월 9일"
}
]
반응형