分析

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

實操

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>

預期效果

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

1.加載整個頁面

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

這里可以看到整個test.html 的內容都被加載了，并且js也執行成功了

2.加載部分內容

<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>的內容，js 部分并不會被加載

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

以上就是動力節點小編介紹的"AJAX加載HTML文件"，希望對大家有幫助，想了解更多可查看AJAX教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。