jQuery+ajax의 getJSON() 사용 예

예
test.js에서 JSON 데이터를 로드하고 JSON 데이터에 이름 필드 데이터를 표시합니다.

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

정의 및 사용법
HTTP GET 요청을 통해 JSON 데이터를 로드합니다.

jQuery 1.2에서는 "myurl?callback=?"과 같은 JSONP 스타일 콜백 함수를 사용하여 다른 도메인에서 JSON 데이터를 로드할 수 있습니다. jQuery는 콜백 함수를 실행하기 위해 ?를 올바른 함수 이름으로 자동으로 대체합니다. 참고: 이 콜백 함수가 실행되기 전에 이 줄 뒤의 코드가 실행됩니다.

구문
jQuery.getJSON(url,[data],[callback])

매개변수 설명
url 로드할 페이지의 URL 주소입니다.
전송할 데이터 키/값 매개변수입니다.
callback 로딩 성공 시 실행되는 콜백 함수입니다.

자세한 설명

이 함수는 축약된 Ajax 함수로 다음과 같습니다.

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

서버로 전송된 데이터는 쿼리 문자열로 URL에 추가될 수 있습니다. . data 매개변수의 값이 객체(맵)인 경우 문자열로 변환되어 URL로 인코딩된 후 URL에 추가됩니다.

콜백에 전달되는 반환 데이터는 JavaScript 객체이거나 JSON 구조에 정의된 배열일 수 있으며 $.parseJSON() 메서드를 사용하여 구문 분석됩니다.

추가 예

예 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 데이터에 이름 필드 데이터를 표시합니다.

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

자세한 내용 jQuery+ajax의 getJSON() 사용 예와 관련된 기사는 PHP 중국어 웹사이트를 주목하세요!