ajax加载html文件

受到单页面应用的触发，想着传统的jquery能不能实现这样一个应用，然后在ajax这里发现了新大陆（请原谅我的无知）

分析

加载一个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>