jQuery ajax - getJSON() 메서드

jQuery Ajax 참조 가이드

예제

AJAX 요청을 사용하여 JSON 데이터를 얻고 결과를 출력합니다:

$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
  });
});

직접 시도해 보세요

정의와 사용법

HTTP GET 요청을 통해 JSON 데이터를 로드합니다.

jQuery 1.2에서는 JSONP 형식의 콜백 함수를 사용하여 다른 도메인의 JSON 데이터를 로드할 수 있습니다. 예를 들어 "myurl?callback=?". jQuery는 자동으로 ?를 올바른 함수 이름으로 대체하여 콜백 함수를 실행합니다. 주의: 이 라인 이후의 코드는 콜백 함수 실행 전에 실행됩니다.

문법

jQuery.getJSON(url,data,success(data,status,xhr))
파라미터 설명
url 필수사항입니다. 요청을 전송할哪个 URL을 정의합니다.
data 선택사항입니다. 서버로 전송할 데이터를 정의합니다.
success(data,status,xhr)

선택적. 요청이 성공할 때 실행되는 함수를 정의합니다.

추가 매개변수:

  • response - 요청 결과 데이터 포함
  • status - 요청 상태 포함
  • xhr - XMLHttpRequest 객체 포함

상세 설명

이 함수는 간단한 Ajax 함수로, 다음과 동일합니다:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

서버로 전송되는 데이터는 URL에 추가된 쿼리 문자열로 전송됩니다. 만약 data 매개변수의 값이 객체(맵)이면, URL에 추가하기 전에 문자열로 변환되고 URL 인코딩됩니다.

매개변수에 전달됩니다. callback 의 반환 데이터는 JavaScript 객체 또는 JSON 구조로 정의된 배열이며, $.parseJSON() 메서드를 사용하여 해석할 수 있습니다.

예제

test.js에서 JSON 데이터를 불러오고 JSON 데이터 중 하나의 name 필드 데이터를 표시합니다:

$.getJSON("test.js", function(json){
  alert("JSON 데이터: " + json.users[3].name);
});

더 많은 예제

예제 1

Flickr JSONP API에서 최신 4장의 고양이 사진을 불러옵니다:

HTML 코드:

<div id="images"></div>

jQuery 코드:


$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  });
});

예제 2

test.js에서 JSON 데이터를 불러오고, 추가 매개변수를 추가하여 JSON 데이터 중 하나의 name 필드 데이터를 표시합니다:

$.getJSON("test.js", { name: "Bill", time: "2pm" }, function(json){
  alert("JSON 데이터: " + json.users[3].name);
});

jQuery Ajax 참조 가이드