jQuery ajax - load() ·½·¨

ʵÀý

ʹÓà AJAX ÇëÇóÀ´¸Ä±ä div ÔªËØµÄÎı¾£º

$("button").click(function(){
  $("div").load('demo_ajax_load.txt');
});

Ç××ÔÊÔÒ»ÊÔ

Äú¿ÉÒÔÔÚÒ³Ãæµ×²¿ÕÒµ½¸ü¶à TIY ʵÀý

¶¨ÒåºÍÓ÷¨

load() ·½·¨Í¨¹ý AJAX ÇëÇó´Ó·þÎñÆ÷¼ÓÔØÊý¾Ý£¬²¢°Ñ·µ»ØµÄÊý¾Ý·ÅÖõ½Ö¸¶¨µÄÔªËØÖС£

×¢ÊÍ£º»¹´æÔÚÒ»¸öÃûΪ load µÄ jQuery ʼþ·½·¨¡£µ÷ÓÃÄĸö£¬È¡¾öÓÚ²ÎÊý¡£

Óï·¨

load(url,data,function(response,status,xhr))
²ÎÊý ÃèÊö
url ¹æ¶¨Òª½«ÇëÇó·¢Ë͵½Äĸö URL¡£
data ¿ÉÑ¡¡£¹æ¶¨Á¬Í¬ÇëÇó·¢Ë͵½·þÎñÆ÷µÄÊý¾Ý¡£
function(response,status,xhr)

¿ÉÑ¡¡£¹æ¶¨µ±ÇëÇóÍê³ÉʱÔËÐеĺ¯Êý¡£

¶îÍâµÄ²ÎÊý£º

  • response - °üº¬À´×ÔÇëÇóµÄ½á¹ûÊý¾Ý
  • status - °üº¬ÇëÇóµÄ״̬£¨"success", "notmodified", "error", "timeout" »ò "parsererror"£©
  • xhr - °üº¬ XMLHttpRequest ¶ÔÏó

Ïêϸ˵Ã÷

¸Ã·½·¨ÊÇ×î¼òµ¥µÄ´Ó·þÎñÆ÷»ñÈ¡Êý¾ÝµÄ·½·¨¡£Ëü¼¸ºõÓë $.get(url, data, success) µÈ¼Û£¬²»Í¬µÄÊÇËü²»ÊÇÈ«¾Öº¯Êý£¬²¢ÇÒËüÓµÓÐÒþʽµÄ»Øµ÷º¯Êý¡£µ±Õì²âµ½³É¹¦µÄÏìӦʱ£¨±ÈÈ磬µ± textStatus Ϊ "success" »ò "notmodified" ʱ£©£¬.load() ½«Æ¥ÅäÔªËØµÄ HTML ÄÚÈÝÉèÖÃΪ·µ»ØµÄÊý¾Ý¡£ÕâÒâζן÷½·¨µÄ´ó¶àÊýʹÓûá·Ç³£¼òµ¥£º

$("#result").load("ajax/test.html");

Èç¹ûÌṩ»Øµ÷º¯Êý£¬Ôò»áÔÚÖ´ÐÐ post-processing Ö®ºóÖ´Ðиú¯Êý£º

$("#result").load("ajax/test.html", function() {
  alert("Load was performed.");
});

ÉÏÃæµÄÁ½¸öÀý×ÓÖУ¬Èç¹ûµ±Ç°Îĵµ²»°üº¬ "result" ID£¬Ôò²»»áÖ´ÐÐ .load() ·½·¨¡£

Èç¹ûÌṩµÄÊý¾ÝÊǶÔÏó£¬ÔòʹÓà POST ·½·¨£»·ñÔòʹÓà GET ·½·¨¡£

¼ÓÔØÒ³ÃæÆ¬¶Î

.load() ·½·¨£¬Óë $.get() ²»Í¬£¬ÔÊÐíÎÒÃǹ涨Ҫ²åÈëµÄÔ¶³ÌÎĵµµÄij¸ö²¿·Ö¡£ÕâÒ»µãÊÇͨ¹ý url ²ÎÊýµÄÌØÊâÓ﷨ʵÏֵġ£Èç¹û¸Ã×Ö·û´®Öаüº¬Ò»¸ö»ò¶à¸ö¿Õ¸ñ£¬½ô½ÓµÚÒ»¸ö¿Õ¸ñµÄ×Ö·û´®ÔòÊǾö¶¨Ëù¼ÓÔØÄÚÈÝµÄ jQuery Ñ¡ÔñÆ÷¡£

ÎÒÃÇ¿ÉÒÔÐÞ¸ÄÉÏÃæµÄÀý×Ó£¬ÕâÑù¾Í¿ÉÒÔʹÓÃËù»ñµÃÎĵµµÄij²¿·Ö£º

$("#result").load("ajax/test.html #container");

Èç¹ûÖ´Ðи÷½·¨£¬Ôò»áÈ¡»Ø ajax/test.html µÄÄÚÈÝ£¬²»¹ýÈ»ºó£¬jQuery »á½âÎö±»·µ»ØµÄÎĵµ£¬À´²éÕÒ´øÓÐÈÝÆ÷ ID µÄÔªËØ¡£¸ÃÔªËØ£¬Á¬Í¬ÆäÄÚÈÝ£¬»á±»²åÈë´øÓнá¹û ID µÄÔªËØÖУ¬ËùÈ¡»ØÎĵµµÄÆäÓಿ·Ö»á±»¶ªÆú¡£

jQuery ʹÓÃä¯ÀÀÆ÷µÄ .innerHTML ÊôÐÔÀ´½âÎö±»È¡»ØµÄÎĵµ£¬²¢°ÑËü²åÈ뵱ǰÎĵµ¡£Ôڴ˹ý³ÌÖУ¬ä¯ÀÀÆ÷³£»á´ÓÎĵµÖйýÂ˵ôÔªËØ£¬±ÈÈç <html>, <title> »ò <head> ÔªËØ¡£½á¹ûÊÇ£¬ÓÉ .load() È¡»ØµÄÔªËØ¿ÉÄÜÓëÓÉä¯ÀÀÆ÷Ö±½ÓÈ¡»ØµÄÎĵµ²»ÍêÈ«Ïàͬ¡£

×¢ÊÍ£ºÓÉÓÚä¯ÀÀÆ÷°²È«·½ÃæµÄÏÞÖÆ£¬´ó¶àÊý "Ajax" ÇëÇó×ñÊØÍ¬Ô´²ßÂÔ£»ÇëÇóÎÞ·¨´Ó²»Í¬µÄÓò¡¢×ÓÓò»òЭÒé³É¹¦µØÈ¡»ØÊý¾Ý¡£

¸ü¶àʵÀý

Àý×Ó 1

¼ÓÔØ feeds.html ÎļþÄÚÈÝ£º

$("#feeds").load("feeds.html");

Àý×Ó 2

ÓëÉÏÃæµÄʵÀýÀàËÆ£¬µ«ÊÇÒÔ POST ÐÎʽ·¢Ë͸½¼Ó²ÎÊý²¢Ôڳɹ¦Ê±ÏÔʾÐÅÏ¢£º

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});

Àý×Ó 3

¼ÓÔØÎÄÕ²à±ßÀ¸µ¼º½²¿·ÖÖÁÒ»¸öÎÞÐòÁÐ±í£º

HTML ´úÂ룺

<b>jQuery Links:</b>
<ul id="links"></ul>

jQuery ´úÂ룺

$("#links").load("/Main_Page #p-Getting-Started li");

¸ü¶à TIY ʵÀý

Éú³É AJAX ÇëÇ󣬲¢Í¨¹ý¸ÃÇëÇó·¢ËÍÊý¾Ý
ÈçºÎʹÓà data ²ÎÊýͨ¹ý AJAX ÇëÇóÀ´·¢ËÍÊý¾Ý¡££¨±¾ÀýÔÚ AJAX ½Ì³ÌÖнâÊ͹ý¡££©
Éú³É AJAX ÇëÇ󣬲¢Ê¹Óûص÷º¯Êý
ÈçºÎʹÓà function ²ÎÊý´¦ÀíÀ´×Ô AJAX ÇëÇóµÄÊý¾Ý½á¹û¡£
Éú³É´øÓдíÎóµÄ AJAX ÇëÇó
ÈçºÎʹÓà function ²ÎÊýÀ´´¦Àí AJAX ÇëÇóÖеĴíÎó£¨Ê¹Óà XMLHttpRequest ²ÎÊý£©¡£
VUE