jQuery - $.getJSON()

$.getJSON() 은 GET 으로 데이터를 전송하고 JSON으로 받을 때 사용합니다. 형식은 다음과 같습니다.

$.getJSON(url [, data] [, callback]);

사용할 수 있는 속성은 다음 표를 참고합니다.

속 성	설 명
url	전송될 URL. 필수 선택
data	서버에 요청을 보낼 때 파라미터 값. 선택사항
callback	전송 완료 후 실행할 콜백 함수. 선택사항

GET 요청시 함께 사용할 수 있는 메소드는 .done(), .fail(), .always() 이며 버전 1.5부터 사용할 수 있습니다. 요청이 종료될 때 호출하는 함수입니다.

메소드	설 명
.done()	요청 성공시 실행할 콜백 함수
.fail()	요청 실패시 실행할 콜백 함수
.always()	요청 완료/성공시 실행할 콜백 함수

// URL 만 요청하는 경우
$.getJSON("example.php");

// URL 과 data 를 함께 요청하는 경우
$.getJSON("example.php", {name: '하보니', age: 20, jop: 'IT'});

// URL 과 콜백 함수로 요청하는 경우
$.getJSON("example.php", function(data, status){
  console.log("data:" + data.name + data.age);
  console.log("Status:" + status);
})

파라미터는 아래와 같이 전송할 수 있습니다.

$.getJSON("example.php", {name: '하보니', age: 20, job: 'IT'});

or

$.getJSON("example.php?name=하보니&age=20&job=IT");

아래는 반환 값을 받아오는 예제입니다. url 에 data 와 함께 전송합니다.

<!-- 
test.php 의 예제

<?
$data = [ 'name' => 'God', 'age' => 20 ];

header('Content-type: application/json');
echo json_encode( $data );
?>
//-->


<script>
$(function(){
 $("button").click(function(){
   $.getJSON("test.php?user=habony", 
     {name:'하보니', age:20, job:'IT'}, 
     function(data){
       $("#user").html(data.name + data.age);
     });
 });
});
</script>

<button>ajax 받아오기</button>
<div id="user"></div>

.done(), .fail(), .always() 메소드는 요청이 이미 완료되면 즉시 콜백 함수가 시작됩니다.

<script>
$(function(){
 $("button").click(function(){
   $.getJSON("test.php?user=habony", function(data){
     $("#user").html(data.name);
   })
   .done(function(){
     console.log("요청이 성공하였습니다.");
   })
   .fail(function(){
     console.log("알수없는 에러가 발생하였습니다.");
   })
   .always(function(){
     console.log("응답이 완료하였습니다.");
   });
 });
});
</script>