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

load(), Ajax·Î ¹ÞÀº HTMLÀ» ÀÏÄ¡ÇÏ´Â ¿ä¼Ò ¾È¿¡ Ãß°¡
7³â Àü
°³¿ä : ¼­¹ö·ÎºÎÅÍ µ¥ÀÌÅ͸¦ ¹Þ¾Æ¼­ ÀÏÄ¡ÇÏ´Â ¿ä¼Ò ¾È¿¡ HTMLÀ» Ãß°¡ÇÕ´Ï´Ù.

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )
url Á¤º¸¸¦ ¿äûÇÒ URL
data ¼­¹ö¿¡ º¸³¾ µ¥ÀÌÅÍ
complete(responseText, textStatus, XMLHttpRequest) ¿äûÀÌ ¿Ï·áµÇ¸é ½ÇÇàµÉ Äݹé ÇÔ¼ö
Note: ÀÌ ÇÔ¼ö´Â ¿©±â¼­ ¾²´Â °Í ¸»°í ´Ù¸¥ ¿ëµµÀÇ ¾²ÀÓ»õµµ ÀÖ½À´Ï´Ù. .load() ÀÔ´Ï´Ù. jQuery´Â ÀÌ ÇÔ¼öÀÇ ÀÎÀÚ¸¦ º¸°í ±¸ºÐÇØ ³À´Ï´Ù.
ÀÌ ÇÔ¼ö´Â ¼­¹ö¿¡¼­ µ¥ÀÌÅ͸¦ ¹Þ¾Æ¼­ ó¸®ÇÒ ¼ö ÀÖ´Â °¡Àå °£´ÜÇÑ ÇüÅÂÀÇ ÇÔ¼öÀÔ´Ï´Ù. ¼º°øÇß´Ù´Â ÀÀ´äÀÌ ¿À¸é(textStatus ¿¡ "success" ³ª "notmodified" °°Àº µ¥ÀÌÅÍ°¡ ÀÖÀ¸¸é), .load() ÇÔ¼ö´Â ¹ÝȯµÈ µ¥ÀÌÅ͸¦ ÀÏÄ¡µÇ´Â ¿ä¼Ò ³»ºÎ¿¡ HTML Çü½ÄÀ¸·Î ¤¾î³Ö¾î ÁÝ´Ï´Ù. ¾ÆÁÖ ½ÉÇÃÇÑ ¿¹Á¦¸¦ º¸½ÃÁÒ.
$('#result').load('ajax/test.html');
Callback Function
¸¸ÀÏ "complete"¿¡ ÇØ´çÇÏ´Â ÄݹéÇÔ¼ö¸¦ ÀÛ¼ºÇß´Ù¸é, HTMLÀÇ »ðÀÔÀÌ ¿Ï·áµÈ ÈÄ¿¡ ½ÇÇàµË´Ï´Ù. ÀÌ ÄݹéÇÔ¼ö´Â jQuery Ä÷º¼Ç¿¡ ÀÖ´Â ¿ä¼ÒÀÇ ¼ö ¸¸Å­ ½ÇÇàÀÌ µÇ°í, this ´Â °¢ ½ÃÁ¡ÀÇ DOM ¿ä¼Ò¸¦ ¶æÇÏ°Ô µË´Ï´Ù.
$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});
À§ µÎ ¿¹Á¦¿¡¼­ ³ª¿Â "result" ¶ó´Â ID¸¦ °¡Áø ¿ä¼Ò°¡ ¾ø´Ù¸é .load() ÇÔ¼ö´Â ½ÇÇàµÇÁö ¾Ê½À´Ï´Ù.
Request Method
µ¥ÀÌÅ͸¦ object ÇüÅ·Πº¸³»´Â °æ¿ì POST ¸Þ¼­µå°¡ »ç¿ëµÇ°í, ±×·¸Áö ¾ÊÀ¸¸é GETÀÌ »ç¿ëµË´Ï´Ù.
Loading Page Fragments
.load() ÇÔ¼ö´Â ¿ø°ÝÁö ¹®¼­ÀÇ Æ¯Á¤ÇÑ ¿ä¼Ò¸¸ ¼±ÅÃÇؼ­ °¡Á®¿Ã ¼öµµ ÀÖ½À´Ï´Ù. ÀÌ°ÍÀ» °¡´ÉÇÏ°Ô ÇÏ·Á¸é url ÆĶó¹ÌÅÍ¿¡ ƯÁ¤ÇÑ ±ÔÄ¢À» »ç¿ëÇØ¾ß ÇÕ´Ï´Ù. °ø¹éÀ» ÁÖ°í jQuery ¼±ÅÃÀÚ(selector)¸¦ Àû¾îÁÖ¸é ±× URL¿¡ ÀÖ´Â ³»¿ëÁß¿¡ ¼±ÅÃÀÚ¿¡ ÇØ´çÇÏ´Â ºÎºÐ¸¸ °¡Á®¿Ã ¼ö ÀÖ½À´Ï´Ù.
¿¹Á¦¸¦ º¸¸é ¹Ù·Î ÀÌÇØÇÒ ¼ö ÀÖ½À´Ï´Ù.
$('#result').load('ajax/test.html #container');
À§ ÇÔ¼ö°¡ ½ÇÇàµÇ¸é, ajax/test.htmlÀÇ ¹®¼­¸¦ Ž»öÇؼ­, container ID¸¦ °¡Áø ¿¤¸®¸ÕÆ®ÀÇ ³»¿ëÀ» ã¾Æ ¹ÝȯÇØ ÁÝ´Ï´Ù. ÀÌ ¿ä¼ÒÀÇ ³»¿ëÀÌ result ID¸¦ °¡Áø ¿ä¼Ò³»¿¡ »ðÀԵǰí, ³ª¸ÓÁö ºÎºÐÀº ¹ö·ÁÁý´Ï´Ù.
jQuery´Â ºê¶ó¿ìÁ®ÀÇ .innerHTML ¼Ó¼ºÀ» »ç¿ëÇÏ¿© ¹®¼­¸¦ Ž»öÇÏ°í »ðÀÔ ÇÕ´Ï´Ù. ÀÌ·± ÇÁ·Î¼¼½º Áß¿¡´Â <html>, <title>, <head> ¿ä¼Ò °°Àº ºÎºÐÀ» ¹«½ÃÇÏ°Ô µË´Ï´Ù. °á°úÀûÀ¸·Î .load() ÇÔ¼ö¿¡ ÀÇÇØ Å½»öµÇ´Â ¹®¼­´Â ¿ÏÀüÇÑ Àüü¿¡ ÇØ´çÇÏ´Â ¼Ò½º°¡ ¾Æ´Ò ¼öµµ ÀÖ´Â °ÍÀÔ´Ï´Ù.
ÀÌÇصǽÃÁÒ? ÇÊ¿ä¾ø´Â ű׵éÀº ¹«½ÃÇϴϱî Àüü ¼Ò½º°¡ ¾Æ´Ò¼öµµ ÀÖ´Ù´Â ¾ê±âÀÔ´Ï´Ù.
Script Execution
¼±ÅÃÀÚ°¡ ¾øÀÌ .load() ÇÔ¼ö¸¦ »ç¿ëÇϸé, ½ºÅ©¸³Æ®µéÀº Á¦°ÅµÇ±â Àü¿¡ html() ÇÔ¼ö¿¡ ÀÇÇØ °°ÀÌ ¹ÝȯµË´Ï´Ù. ÀÌ ½ºÅ©¸³Æ®´Â È£ÃâÇÑ ÆäÀÌÁö¿¡¼­ ½ÇÇàµÇ°Ô µË´Ï´Ù. ÇÏÁö¸¸ ¼±ÅÃÀÚ¸¦ Æ÷ÇÔÇؼ­ .load() ÇÔ¼ö¸¦ È£ÃâÇϸé, DOMÀÌ ¾÷µ¥ÀÌÆ® µÇ±â Àü¿¡ Á¦°ÅµÇ°í ½ÇÇàµÇÁöµµ ¾Ê½À´Ï´Ù. ¾Æ·¡ µÎ°¡Áö ¿¹¸¦ º¸½ÃÁÒ.
¾Æ·¡´Â JavaScript°¡ #a ¾È¿¡¼­ ·ÎµåµË´Ï´Ù.
$('#a').load('article.html');
ÇÏÁö¸¸, ¾Æ·¡´Â ½ºÅ©¸³Æ® ºí·ÏÀÌ Á¦°ÅµÇ°í ½ÇÇàµÇÁöµµ ¾Ê½À´Ï´Ù.
$('#b').load('article.html #target');
Additional Notes: ºê¶ó¿ìÁ®ÀÇ º¸¾È ¶§¹®¿¡, ´ëºÎºÐÀÇ "Ajax" ¿äûÀº same origin policy¿¡ ÀÇ°Å ´Ù¸¥ µµ¸ÞÀÎ, ´Ù¸¥ ¼­ºêµµ¸ÞÀÎ, ´Ù¸¥ ÇÁ·ÎÅäÄÝ ÀÏ °æ¿ì »ç¿ëÇÒ ¼ö ¾ø½À´Ï´Ù.
±×·¡¼­ ¾Æ·¡ ¿¹Á¦µéµµ °á°ú¸¦ º¼ ¼ö°¡ ¾ø½À´Ï´Ù. jquery.com °ú µµ¸ÞÀÎÀÌ ´Ù¸£±â ¶§¹®ÀÌÁÒ. ¿ä Å×½ºÆ®´Â Á÷Á¢ ÆäÀÌÁö¸¦ ±¸ÇöÇϼż­ Çغ¸¼Å¾ß °Ú³×¿ä.
¿¹ Á¦  
http://api.jquery.com/ ¸ÞÀÎÆäÀÌÁöÀÇ ÇÏ´Ü ³×ºñ°ÔÀ̼Ç(footer navigation)ÀÇ ¸ñ·ÏÀ» °¡Á®¿É´Ï´Ù.
<!DOCTYPE html>
<html>
<head>
  <style>
body{ font-size: 12px; font-family: Arial; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<b>Footer navigation:</b>
<ol id="new-nav"></ol>

<script>
  $("#new-nav").load("/ #jq-footerNavigation li");
</script>

</body>
</html>
¹Ì¸®º¸±â
À§¿¡µµ ¾ê±âÇßÁö¸¸ µµ¸ÞÀÎÀÌ ´Þ¶ó Ajax°¡ ¾ÈµË´Ï´Ù.

¿¹ Á¦  
¿¡·¯°¡ ÀÖÀ¸¸é ¾Ë·ÁÁÝ´Ï´Ù.
<!DOCTYPE html>
<html>
<head>
  <style>
  body{ font-size: 12px; font-family: Arial; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
  
<script>
$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
  </script>

</body>
</html>
¹Ì¸®º¸±â

ÀÌ ¿¹Á¦´Â 404¿¡·¯¸¦ ÀϺη¯ ³½°Ì´Ï´Ù. ¿¡·¯ÀÎ °æ¿ì ó¸® ¹æ¹ýÀ» º¸¿©ÁÖ°í Àֳ׿ä.

¿¹ Á¦  
feeds.html ³»¿ëÀ» "feeds" ID¸¦ °¡Áø ¿¤¸®¸ÕÆ®¿¡ º¸¿©ÁÝ´Ï´Ù.
$("#feeds").load("feeds.html");

//Result:
<div id="feeds"><b>45</b> feeds found.</div>

¿¹ Á¦  
¼­¹ö¿¡ ¹è¿­ µ¥ÀÌÅ͸¦ º¸³À´Ï´Ù.
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

¿¹ Á¦  
À§ÀÇ ¿¹Á¦¿Í °°Áö¸¸, ¼­¹ö¿¡ POST ·Î Ãß°¡ÀûÀÎ ÆĶó¹ÌÅ͸¦ º¸³»°í, ¼­¹ö¿¡¼­ 󸮰¡ ³¡³ª¸é ÄݹéÇÔ¼ö°¡ ½ÇÇàµË´Ï´Ù.
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});

ƯÁ¤ ¿ä¼Ò¸¦ ¼±ÅÃÇÏ°í ±× ¿µ¿ª¸¸ ¾÷µ¥ÀÌÆ® ÇØ¾ß ÇÒ °æ¿ì ÀÌ ÇÔ¼ö¸¦ »ç¿ëÇÕ´Ï´Ù. ¾ÆÁÖ À¯¿ëÇØ º¸ÀÔ´Ï´Ù. ²À²À ¾Ë¾ÆµÎ¼Å¼­ µÎ°íµÎ°í ½á¸ÔÀ¸¼¼¿ä. ¾Æ~ ¹°·Ð get()À¸·Î ¹Þ¾Æ¼­ $('#some').html(returndata); ÀÇ Çü½ÄÀ¸·Î ¾²¼Åµµ µË´Ï´Ù.
ÃßõÃßõ : 360 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,735
[jQuery]toggleClass() ¸Þ¼­µå·Î CSS Ŭ·¡½º¿¡ ´ëÇÑ Åä±×¸µ
2,734
JQuery ¸Þ¼­µå Çѹø¸¸ ½ÇÇà ( One() )
2,733
jQuery Event(À̺¥Æ®¿¡ »ý¸íÀ»)
2,732
jQuery Event - bind() ¸Þ¼­µå¸¦ ÅëÇÑ À̺¥Æ® ¿¬°á
2,731
escapeshellcmd
2,730
passthru
2,729
system
2,728
exec
2,727
proc_open
2,726
popen
2,725
fgetc
2,724
fgets
2,723
fclose
2,722
fopen
2,721
fsockopen
2,720
stream_set_timeout
2,719
JQUERY Ŭ¸¯ À̺¥Æ® °­Á¦ ¹ß»ý
2,718
ajaxComplete() Ajax°¡ ¿Ï·áµÇ¸é È£Ãâ
2,717
ajaxError() Ajax ¿¡·¯°¡ ¹ß»ýµÇ¸é È£Ãâ
2,716
jQuery.ajaxPrefilter() $.ajax() ÇÔ¼ö È£Ãâ Àü Ajax ¿É¼Ç ¼öÁ¤
2,715
ajaxSend() Ajax ¿äûÀ» º¸³»±â Àü¿¡ È£ÃâµÇ´Â À̺¥Æ®
2,714
jQuery.ajaxSetup() Ajax ¿É¼Ç °ªÀ» ¼³Á¤ÇÏ´Â ÇÔ¼ö
2,713
ajaxStart() Ajax ¿äûÀÌ ½ÃÀÛµÉ ¶§ È£ÃâµÇ´Â ÇÔ¼ö
2,712
ajaxStop() Ajax ¿äûÀÌ ¿Ï·áµÇ¸é È£Ãâ
2,711
ajaxSuccess() Ajax ¿äûÀÌ ¼º°øÀûÀ¸·Î ¿Ï·á ¶§¸¶´Ù È£Ãâ
2,710
jQuery.getScript, JavaScript ÆÄÀÏÀ» ·ÎµåÇÏ°í ½ÇÇà
load(), Ajax·Î ¹ÞÀº HTMLÀ» ÀÏÄ¡ÇÏ´Â ¿ä¼Ò ¾È¿¡ Ãß°¡
2,708
jQuery.param(), Ajax µ¥ÀÌÅÍ¿ë ¹è¿­À̳ª °´Ã¼¸¦ Á÷·ÄÈ­
2,707
jQuery.get() HTTP GET ¹æ½Ä Ajax ¿äû
2,706
jQuery.post(), Ajax HTTP POST ¹æ½Ä ¿äû
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.