分析

加載一個(gè)html的話是可以分為加載其中某個(gè)塊(div)和加載整個(gè)頁(yè)面，而不管加載其中任何一種都是需要本頁(yè)面的一個(gè)塊(div)來(lái)進(jìn)行加載展示。加載的方法可以是$(ajax{}) 方法也可以是 $('#div').load() 方法，下面為大家演示一下

實(shí)操

index.html

<div id="router">
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>  

text.html

<section>
    <div>ss</div>
    <div id="warp">11</div>
    <div class="warp">22</div>
</section>
<script>
	$('#router').css('color','red');
</script>

預(yù)期效果

index.html (load方法和$(ajax)效果一致)

1.加載整個(gè)頁(yè)面

<script>
   $.ajax({
       url:'./test.html',
       type:'get',
       success:function(res){
           $('#router').html($(res));
       }
   });
    // $('#router').load('./test.html');
</script>

這里可以看到整個(gè)test.html 的內(nèi)容都被加載了，并且js也執(zhí)行成功了

2.加載部分內(nèi)容

<script>
   $.ajax({
       url:'./test.html',
       type:'get',
       success:function(res){
           var html = $(res).find('.warp');
           $('#router').html(html);
       }
   });
    // $('#router').load('./test.html .warp');
</script>

這里呢可以看到只是加載了text.html 中<div class="warp"></div>的內(nèi)容，js 部分并不會(huì)被加載

<script>
   $.ajax({
       url:'./test.html',
       type:'get',
       success:function(res){
           var html = $(res).find('#warp');
           $('#router').html(html);
       }
   });
    // $('#router').load('./test.html #warp');
</script>

以上就是動(dòng)力節(jié)點(diǎn)小編介紹的"AJAX加載HTML文件"，希望對(duì)大家有幫助，想了解更多可查看AJAX教程。動(dòng)力節(jié)點(diǎn)在線學(xué)習(xí)教程，針對(duì)沒(méi)有任何Java基礎(chǔ)的讀者學(xué)習(xí),讓你從入門(mén)到精通,主要介紹了一些Java基礎(chǔ)的核心知識(shí)，讓同學(xué)們更好更方便的學(xué)習(xí)和了解Java編程，感興趣的同學(xué)可以關(guān)注一下。