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

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,795
[mySql] ´Ù¾çÇÑ db°Ë»ö ½ºÅ³ ÃÑÁ¤¸® (¶ç¿ö¾²±â ¹«½Ã, ´ÙÁß°Ë»ö, Æ÷ÇԵǴ ´Ü¾î °Ë»ö)
2,794
php sqlÀÎÁ§¼Ç °ø°Ý¸·±â
2,793
[php] SQL ÀÎÁ§¼Ç °ø°Ý
2,792
[PHP] Á¤±ÔÇ¥Çö½ÄÀ» ÀÌ¿ëÇÑ Æ¯¼ö¹®ÀÚ ¼ýÀÚÁ¦°Å
2,791
Á¤±ÔÇ¥Çö½Ä - ÆÐÅÏ º¯°æÀÚ
2,790
PHP ȯ°æº¯¼ö Á¤¸®
2,789
PHP Ŭ·¡½º »ç¿ë¹æ¹ý Á¤¸®
2,788
php¿¡¼­ º¯¼ö°ªÀ» ÇÔ¼öÀ̸§À¸·Î »ç¿ëÇÏ¿© ÇÔ¼ö ½ÇÇàÇÏ´Â ¹æ¹ý
2,787
repaceÀ» ÀÌ¿ëÇÑ Á¤±Ô½Ä ¸ðÀ½
2,786
HTML ÆäÀÌÁö¿¡¼­ ÁÖ¼®À» Á¦°ÅÇÏ´Â Á¤±Ô½Ä(PHP)
2,785
PHP - ¹®ÀÚ¿­¿¡¼­ HTMLÅÂ±× Á¦°Å + Á¤±Ô½Ä
2,784
PHP Á¤±Ô½ÄÀ» È°¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
2,783
PHP Á¤±Ô½Ä Á¤¸®
2,782
Á¤±Ô½Ä ÆÐÅÏ ¹®¹ý
2,781
[Á¤±ÔÇ¥Çö½Ä]Á¤±ÔÇ¥Çö½Ä Á¤¸®
2,780
fopen ¸·ÇûÀ» ¶§ fsocketopen »ç¿ë¹æ¹ý
2,779
[php]¿øÇÏ´Â ´Ü¾î¸¦ ã¾Æ¼­ ġȯ ÇØÁÖ´Â ¹æ¹ý preg_replace
2,778
PHP + MYSQL ¿¬°á Å×½ºÆ® ¿¹Á¦ (mysqli Ŭ·¡½º¹æ½Ä)
2,777
PHP + MYSQL ¿¬°á Å×½ºÆ® ¿¹Á¦ (pdo ¹æ½Ä)
2,776
PHP + MYSQL ¿¬°á Å×½ºÆ® ¿¹Á¦ (original)
2,775
DB Á¢±Ù ¹× Äõ¸®¹®(insert,select,update,delete)
2,774
[MySQL] Çʵ忡¼­ ƯÁ¤¹®ÀÚ Æ÷ÇÔ ¶Ç´Â Á¦¿ÜÇÑ DB °Ë»ö, LIKE ,NOT
2,773
jQuery ÇÙ½É - ³ëµå ´Ù·ç±â
2,772
jQuery show() / hide() / toggle() »ç¿ë¹ý
2,771
[jQuery] readyÀÇ »ç¿ë¹ý
2,770
[jQuery] À§Ä¡±â¹Ý Selector
2,769
[jQuery] css selector
2,768
document.getElementByTagName()¸¦ jQuery·Î ¹Ù²ãº¸ÀÚ.
2,767
getElementsByClassName¸¦ jQuery·Î ¹Ù²ãº¸ÀÚ.
2,766
getElementById¸¦ jQuery·Î ¹Ù²ãº¸ÀÚ
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.