[jQuery] getJSON 사용법, 예제 (JSON DATA 가져오기)

jquery의 getJSON() 메서드는 HTTP get 요청을 통해서 JSON DATA를 가져올 수 있습니다.

 

• 사용법

$.getJSON( url [, data ] [, success ] )

 

url (필수): 가져올 JSON 데이터를 포함하는 파일의 URL입니다.
data (선택): 서버에 전송할 추가 데이터를 지정합니다. 이 매개 변수는 선택 사항이며 필요하지 않은 경우 생략할 수 있습니다.
success (선택): 요청이 성공한 경우 실행할 함수입니다. 이 매개 변수는 선택 사항이며 필요하지 않은 경우 생략할 수 있습니다. success 함수는 세 개의 매개 변수를 받습니다: data (서버에서 가져온 JSON 데이터), status (요청 상태), jqXHR (jQuery XMLHttpRequest 개체)

 

 

• JSON DATA

[
  {"GroupId": 1, "GroupName": "그룹1"},
  {"GroupId": 2, "GroupName": "그룹2"},
  {"GroupId": 3, "GroupName": "그룹3"},
  {"GroupId": 4, "GroupName": "그룹4"},
  {"GroupId": 5, "GroupName": "그룹5"}
]

 

• getJSON() 예제

 $.getJSON('<c:url value='/js/json/group.json'/>', function(data) {
        $.each(data, function(key, row) {
        	alert(row.GroupName);
        });
 });

 

json의 경로를 작성하시고 each 메서드를 통해서 json의 GroupName의 값을 가져옵니다.

 

• AJAX() 메서드와 차이점

ajax 메서드는 모든 유형의 HTTP 요청을 수행할 수 있으며, dataType 속성을 사용하여 요청된 데이터 형식을 지정할 수 있습니다. getJSON() 메서드는 JSON 형식으로 응답이 수신될 것으로 예상되므로 dataType을 JSON으로 설정할 필요가 없습니다. 또, getJSON 메서드는 요청이 성공한 경우 success/error 콜백함수를 자동으로 호출합니다. ajax 메서드는 콜백함수를 지정해서 실행코드를 작성하셔야 합니다.

 

JSON DATA를 가져올 때는 ajax 대신 간단하게 getJSON을 통해 코드를 단축할 수 있습니다.