jQuery ajax - load() ·½·¨
ʵÀý
ʹÓà AJAX ÇëÇóÀ´¸Ä±ä div ÔªËØµÄÎı¾£º
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
¶¨ÒåºÍÓ÷¨
load() ·½·¨Í¨¹ý AJAX ÇëÇó´Ó·þÎñÆ÷¼ÓÔØÊý¾Ý£¬²¢°Ñ·µ»ØµÄÊý¾Ý·ÅÖõ½Ö¸¶¨µÄÔªËØÖС£
×¢ÊÍ£º»¹´æÔÚÒ»¸öÃûΪ load µÄ jQuery ʼþ·½·¨¡£µ÷ÓÃÄĸö£¬È¡¾öÓÚ²ÎÊý¡£
Óï·¨
load(url,data,function(response,status,xhr))
| ²ÎÊý | ÃèÊö |
|---|---|
| url | ¹æ¶¨Òª½«ÇëÇó·¢Ë͵½Äĸö URL¡£ |
| data | ¿ÉÑ¡¡£¹æ¶¨Á¬Í¬ÇëÇó·¢Ë͵½·þÎñÆ÷µÄÊý¾Ý¡£ |
| function(response,status,xhr) |
¿ÉÑ¡¡£¹æ¶¨µ±ÇëÇóÍê³ÉʱÔËÐеĺ¯Êý¡£ ¶îÍâµÄ²ÎÊý£º
|
Ïêϸ˵Ã÷
¸Ã·½·¨ÊÇ×î¼òµ¥µÄ´Ó·þÎñÆ÷»ñÈ¡Êý¾ÝµÄ·½·¨¡£Ëü¼¸ºõÓë $.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 ²ÎÊý£©¡£