jQuery ajax_jquery의 getJSON() 사용 예

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

코드 복사 코드는 다음과 같습니다.

$.getJSON("test.js", 함수(json){
Alert("JSON 데이터: " json.users[3].name);
});

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

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

문법
jQuery.getJSON(url,[데이터],[콜백])

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

자세한 설명

이 함수는 Ajax 함수의 약어로 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$.ajax({
url: url,
데이터: 데이터,
성공: 콜백,
데이터 유형: json
});

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

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

더 많은 예시

예시 1
Flickr JSONP API에서 최신 고양이 사진 4장을 로드하세요.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
Tags=cat&tagmode=any&format=json&jsoncallback=?", 함수(데이터){
$.each(data.items, 함수(i,item){
$("").attr("src", item.media.m).appendTo("#images");
( i == 3 )이면 false를 반환합니다.
});
});

예시 2
test.js에서 JSON 데이터를 로드하고, 매개변수를 추가하고, JSON 데이터에 이름 필드 데이터를 표시합니다.

코드 복사 코드는 다음과 같습니다.

$.getJSON("test.js", { 이름: "John", 시간: "오후 2시" }, function(json){
Alert("JSON 데이터: " json.users[3].name);
});