ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

jQuery.getJSON, JSON µ¥ÀÌÅ͸¦ ·Îµå
7³â Àü
jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

°³¿ä : HTTP GET ¹æ½Ä ¿äûÀ» ÅëÇØ ¼­¹ö·ÎºÎÅÍ ¹ÞÀº JSON µ¥ÀÌÅ͸¦ ·ÎµåÇÕ´Ï´Ù.

jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )
url Á¤º¸¸¦ ¿äûÇÒ URL
data ¼­¹ö·Î º¸³¾ data
success(data, textStatus, jqXHR) ¿äûÀÌ ¼º°øÇÏ¸é ½ÇÇàµÉ Äݹé ÇÔ¼ö
ÀÌ ÇÔ¼öÀÇ °¡Àå °£´ÜÇÑ »ç¿ë¹ýÀº ¾Æ·¡¿Í °°½À´Ï´Ù.
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});
¼­¹ö·Î º¸³¾ Data´Â URL Äõ¸® ½ºÆ®¸µ¿¡ Ãß°¡µË´Ï´Ù. ¸¸ÀÏ data ÆĶó¹ÌÅÍ°¡ object¶ó¸é, ¹®ÀÚ¿­°ú url-encoded¸¦ ÅëÇØ º¯È¯µÈ ÈÄ URL¿¡ Ãß°¡µÇ¾î º¸³»Áö°Ô µË´Ï´Ù.
´ëºÎºÐÀº ¼º°ø ½Ã¿¡ ó¸®ÇÏ´Â ·ÎÁ÷À» °¡Áö°í ÀÖ½À´Ï´Ù.
$.getJSON('ajax/test.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});
À§ ¿¹´Â, ¾Æ·¡¿Í °°Àº JSON ÇüÅÂÀÇ ÀÀ´äµ¥ÀÌÅ͸¦ ó¸®ÇÑ´Ù°í °¡Á¤ÇÕ´Ï´Ù.
{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}
½ºÅ©¸³Æ®¸¦ ¼³¸íÇÏÀÚ¸é, °á°ú¸¦ ¹Þ¾Æ¼­ ·çÇÁ¸¦ µ¹¸é¼­ µ¥ÀÌÅ͸¦ ¹è¿­¿¡ ´ã°í, ±× µ¥ÀÌÅ͸¦ ul ¿¡ ¸®½ºÆ®È­ ÇÏ°í, ¸¶Áö¸·À¸·Î body ¿¡ Ãß°¡½ÃÅ°´Â °Ì´Ï´Ù.
success ÄݹéÇÔ¼ö´Â JavaScript °´Ã¼ ¶Ç´Â JSON ±¸Á¶ÀÇ ¹è¿­ ÇüÅÂÀÇ µ¥ÀÌÅ͸¦ Àü´Þ¹ÞÀ» ¼ö ÀÖ°í ±× µ¥ÀÌÅ͸¦ ´Ù·ç´Âµ¥ $.parseJSON() ÇÔ¼ö¸¦ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ¶ÇÇÑ ÀÀ´ä »óÅ°ªµµ ¹®ÀÚ¿­·Î ³Ñ¾î¿É´Ï´Ù.
jQuery 1.5ºÎÅÍ success Äݹé ÇÔ¼ö´Â "jqXHR" °´Ã¼µµ ¹ÞÀ» ¼ö ÀÖ°Ô µÇ¾ú½À´Ï´Ù.(jQuery 1.4±îÁö´Â XMLHttpRequest °´Ã¼¸¦ ¹Þ¾ÒÀ½). ÇÏÁö¸¸, JSONP ³ª Å©·Î½ºµµ¸ÞÀÎ(cross-domain)ÀÇ GET ¿äû ½Ã¿¡´Â XHRÀ» »ç¿ëÇÏÁö ¸øÇÕ´Ï´Ù. ÀÌ·¯ÇÑ °æ¿ì¿¡¼­´Â (j)XHR ³ª textStatus ÀÎÀÚ´Â success Äݹé ÇÔ¼ö¿¡¼­ "undefined"À¸·Î Àνĵ˴ϴÙ.
Important: jQuery 1.4 ¿¡¼­´Â, ¸¸¾à JSON ÆÄÀÏ¿¡ syntax ¿À·ù°¡ ÀÖ¾ú´Ù¸é, ¿äûÀÌ fail·Î 󸮵Ǿú½À´Ï´Ù. ÀÌ·± ÀÌÀ¯·Î JSON µ¥ÀÌÅ͸¦ ¼ÕÀ¸·Î ÀÚÁÖ ÆíÁýÇÏ´Â °ÍÀ» ÇÇÇØ¾ß Çß½À´Ï´Ù. JSONÀº JavaScriptÀÇ °´Ã¼ Ç¥±â¹ý º¸´Ù ´õ °­·ÂÇÑ ±¸¹® ±ÔÄ¢À» °¡Áø µ¥ÀÌÅÍ ±³È¯ Æ÷¸ËÀÔ´Ï´Ù. ¿¹¸¦ µé¾î, JSON¿¡¼­ »ç¿ëµÇ´Â ¸ðµç ¹®ÀÚµéÀº, ¼Ó¼ºÀÌµç °ªÀ̵ç, ¸ðµÎ ½Öµû¿ÈÇ¥(double-quotes)¸¦ »ç¿ëÇØ¾ß ÇÕ´Ï´Ù. JSON Æ÷¸Ë¿¡ ´ëÇØ ´õ ¾Ë°í ½ÍÀ¸½Ã¸é http://json.org/.
À§ÀÇ ¾ê±â´ë·Î ½Öµû¿ÈÇ¥¸¦ ½á¾ßÇÕ´Ï´Ù¸¸;; ¿äÁòÀº Á» ·çÁîÇØÁö±ä Çß½À´Ï´Ù. ±×·¡µµ ƯÁ¤ÇÑ »óȲ¿¡¼­ ½Öµû¿ÈÇ¥¸¦ »ç¿ëÇÏÁö ¾Ê¾Æ¼­ ¿¡·¯°¡ »ý±â´Â °æ¿ì°¡ Á¾Á¾ ¹ß»ýÇÏ´Ï ±¸¹® ±ÔÄ¢À» ÁöÅ°½Ã´Â °ÍÀÌ ÁÁ½À´Ï´Ù.
JSONP
¸¸¾à URL¿¡ "callback=?" À̶ó´Â ¹®ÀÚ¿­ÀÌ Æ÷ÇÔ µÇ¾ú´Ù¸é, ÀÌ ¿äûÀº JSONP ·Î ´ëüµË´Ï´Ù. jsonp µ¥ÀÌÅÍ Å¸ÀÔ¿¡ ´ëÇÑ Àú ÀÚ¼¼ÇÑ ³»¿ëÀº $.ajax() ÇÔ¼ö¿¡ ±â¼úµÇ¾î ÀÖ½À´Ï´Ù.
The jqXHR Object
jQuery 1.5ºÎÅÍ, ¸ðµç jQueryÀÇ Ajax ÇÔ¼ö´Â XMLHTTPRequest °´Ã¼ÀÇ »óÀ§ÁýÇÕÀ» ¹Ýȯ¹ÞÀ» ¼ö ÀÖ°Ô µÇ¾ú½À´Ï´Ù. ÀÌ°ÍÀ» jQuery XHR °´Ã¼ ¶Ç´Â "jqXHR" ¶ó°í Çϸç, $.get()À» »ç¿ëÇÏ¸é ¹Ýȯ¹ÞÀ» ¼ö ÀÖµµ·Ï ±¸¼ºµÇ¾ú½À´Ï´Ù. ÀÌ·± ¾à¼ÓµÈ ÀÎÅÍÆäÀ̽º ±¸Á¶´Â, ¸ðµç ¼Ó¼ºµé, ÇÔ¼öµé ±×¸®°í ¾à¼ÓµÈ µ¿ÀÛµéÀ» Æ÷ÇÔÇÕ´Ï´Ù.(Deferred object ¸¦ Âü°íÇϼ¼¿ä). ÆíÀǼº°ú Áö¼Ó¼ºÀ» À§ÇØ Äݹé¸íÀ» $.ajax()¿¡¼­ »ç¿ëÇÒ ¼ö ÀÖ°í, ¿©±â¿¡¼­ .error(), .success(), .complete() ÇÔ¼öµéÀ» ÀÌ¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀÌ·± ÇÔ¼öµéÀº ¸ðµÎ µ¿ÀÏÇÑ À̸§À¸·Î »ç¿ëÇÒ ¼ö ÀÖ´Â ÀÎÀÚµéÀ» ¹Ýȯ¹Þ¾Æ ó¸®ÇÒ ¼ö ÀÖ½À´Ï´Ù.
¶ÇÇÑ, jQuery 1.5ºÎÅÍ $.get()À» Æ÷ÇÔÇÏ¿© üÀÎ ÇüÅ·Π¿«¾îÁø ¿©·¯°³ÀÇ .success(), .complete(), .error() µéÀ» ´ÜÀÏ ¿äû¿¡ »ç¿ëÇÒ ¼ö ÀÖ°Ô µÇ¾ú°í, ¿äûÀÌ ¿Ï·áµÈ ÈÄ¿¡µµ À̵é ÄݹéÀ» ÀúÁ¤ÇÒ ¼ö ÀÖ½À´Ï´Ù. ¸¸ÀÏ ¿äûÀÌ ÀÌ¹Ì ¿Ï·áµÇ¾ú´Ù ÇÏ´õ¶óµµ, ´Ù½Ã ºÒ·¯¼­ ¾µ ¼ö ÀÖ½À´Ï´Ù.
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON("example.json", function() {
  alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });
¾Æ·¡ÂÊ¿¡¼­ ´Ù½Ã È£ÃâÇصµ ¿©ÀüÈ÷ jqxhrÀº À§¿¡¼­ ¹ÝȯµÈ °´Ã¼¿Í µ¿ÀÏÇÏ´Ù´Â °ÍÀÔ´Ï´Ù. Áï, Áß°£¿¡ jqxhr¿¡ ´Ù¸¥ ¹Ýȯ°ªÀ» ÇÒ´ç(Assign)ÇÏÁö ¾Ê¾Ò´Ù¸é ¾ðÁ¦´øÁö °°Àº °á°ú¿¡ ´ëÇØ ´Ù·ê ¼ö ÀÖ´Ù´Â ¶æÀÎ°Í °°½À´Ï´Ù.(Àá±ñ Å×½ºÆ®¸¦ ÇØ º» °á°úÀÔ´Ï´Ù.) ÀÌÇØ°¡ µÇ½Ã³ª¿ä??
Additional Notes: ºê¶ó¿ìÀú º¸¾È Á¤Ã¥¿¡ ÀÇ°ÅÇÏ¿© ´ëºÎºÐÀÇ "Ajax" »ç¿ë ½Ã same origin policy¸¦ Àû¿ë¹Þ°Ô µË´Ï´Ù. Ajax ¿äûÀº ´Ù¸¥ µµ¸ÞÀÎ, ´Ù¸¥ ¼­ºêµµ¸ÞÀÎ, ´Ù¸¥ ÇÁ·ÎÅäÄÝ °£¿¡´Â ¼º°øµÇÁö ¸øÇÕ´Ï´Ù. ¸¸ÀÏjQuery.get()¸¦ ¼öÇàÇϸé error Äڵ尡 ³Ñ¾î¿À°í, .ajaxError() ÇÔ¼ö¿¡¼­ ´Ù·çÁö ¾Ê´Â ÇÑ µû·Î 󸮵ÇÁö ¾Ê½À´Ï´Ù. Alternatively, as of jQuery 1.5 ºÎÅÍ´Â, jqXHR °´Ã¼¸¦ °¡Áö°í .error() ÇÔ¼ö¿¡¼­ ´Ù·ê ¼öµµ ÀÖ½À´Ï´Ù. Script ¿Í JSONP ¿äûÀº same origin policy restrictions ÀÌ Àû¿ëµÇÁö ¾Ê½À´Ï´Ù.

¿¹ Á¦  
Flickr JSONP API¸¦ ÅëÇØ °¡Àå ÃÖ±ÙÀÇ °í¾çÀÌ »çÁø 4ÀåÀ» °¡Á®¿É´Ï´Ù.
<!DOCTYPE html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="images">

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

</body>
</html>

µµ¸ÞÀÎÀÌ ´Ù¸¥ °æ¿ì JSONP¸¦ »ç¿ëÇÕ´Ï´Ù. ±×¿¡ ´ëÇÑ ¿¹Á¦ÀÔ´Ï´Ù.

¿¹ Á¦  
test.js ÆÄÀÏ¿¡¼­ JSON µ¥ÀÌÅ͸¦ ·ÎµåÇÏ°í name ¿¡ Á¢±ÙÇÕ´Ï´Ù.
$.getJSON("test.js", function(json) {
   alert("JSON Data: " + json.users[3].name);
});

¿¹ Á¦  
µ¥ÀÌÅ͸¦ º¸³» test.js¿¡¼­ JSON µ¥ÀÌÅ͸¦ ·ÎµåÇÏ°í, name ¿¡ Á¢±ÙÇÕ´Ï´Ù.
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json) {
    alert("JSON Data: " + json.users[3].name);
    });
ÃßõÃßõ : 303 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,765
ÀÚ¹Ù½ºÅ©¸³Æ® ¿¬½À ¿¹Á¦ - ·£´ýÇÏ°Ô ¿òÁ÷ÀÌ´Â ÅؽºÆ® ¸¸µé±â
2,764
jQuery Mobile¿¡¼­ À¯¿ëÇÑ ÄÚµå 10°¡Áö
2,763
ÀÚ¹Ù½ºÅ©¸³Æ®·Î º¹»çÇϱ⠱â´É ±¸ÇöÇϱâ
2,762
[JqueryMobile] - Jquery Mobile È­¸é °­Á¦ ȸÀü
2,761
jQuery – ½º¸¶Æ®Æù ½ºÅ©¸° ȸÀü °¨Áö ½ºÅ©¸³Æ®
2,760
javascript audioÆÄÀÏ Àç»ý
2,759
javascript º¯¼ö scope shadowing Ŭ·ÎÀú
2,758
javascript ¹Ýº¹¹®
2,757
javascript Á¶°Ç¹®
2,756
javascript ¹è¿­
2,755
javascript ¿¬»êÀÚ¿Í ÇÔ¼ö
2,754
javascript ÀÚ·áÇü
2,753
javascript º¯¼ö
2,752
[jQuery] animate()¿¡¼­ stop()ÀÇ Á߿伺
2,751
javascript audioÆÄÀÏ Àç»ý
2,750
[jQuery.$ajax]mysql + php ¼­¹ö¿¡¼­ json µ¥ÀÌÅÍ ¾ò¾î¿À±â
2,749
Daum¿¡¼­ »ç¿ëÇÏ°í ÀÖ´Â ¸¶¿ì½º ¿À¸¥ÂÊ »ç¿ë ±ÝÁö ½ºÅ©¸³Æ®
2,748
MP3 ¸µÅ©½Ã ½ºÆ®¸®¹Ö µÇÁö ¾Ê°í ´Ù¿î·Îµå µÇµµ·Ï ¸¸µé±â
2,747
jQuery ºñµ¿±â Ajax Åë½ÅÀ» Çغ¸ÀÚ!! - JSON¹æ½Ä
2,746
[jQuery] load ¸¦ ÀÌ¿ëÇÑ ½Ç½Ã°£ ÆäÀÌÁö °¡Á®¿À±â
2,745
[jQuery]ºñµ¿±âÀûÀ¸·Î JSONÆÄÀÏ ·Îµå
2,744
[jQuery]µ¿ÀûÀ¸·Î ¿ø°Ý ÆäÀÌÁö ·Îµå
2,743
[jQuery]¿öÅ͸¶Å© ÅؽºÆ®¹Ú½º ÄÁÆ®·Ñ ±¸Çö
2,742
[jQuery]Æ®¸®ºä ÄÁÆ®·Ñ
2,741
[jQuery]¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú ¸ØÃß±â - stop()
2,740
[jQuery]¿©·¯°¡Áö È¿°ú µ¿½Ã ó¸® - animate()
2,739
[jQuery]½½¶óÀÌµå ¾÷
2,738
[jQuery]½½¶óÀÌµå ¾÷/´Ù¿î - slideToggle()
2,737
[jQuery] scroll down °ú scroll up ÇÒ¶§ À̺¥Æ® Àû¿ë½ÃÅ°±â
2,736
[jQuery]addClass() : ½ºÅ¸ÀÏ Ãß°¡ [removeClass()]
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.