AJAX加载HTML文件

分析

加载一个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编程，感兴趣的同学可以关注一下。