受到单页面应用的触发,想着传统的jquery能不能实现这样一个应用,然后在ajax这里发现了新大陆(请原谅我的无知)
分析
加载一个html
的话是可以分为加载其中某个块(div
)和加载整个页面,而不管加载其中任何一种都是需要本页面的一个块(div
)来进行加载展示。加载的方法可以是$(ajax{})
方法也可以是 $('#div').load()
方法,下面为大家演示一下
实操
index.html
<div id="router">
</div>
<script src="https://cdn.bootcss/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文件
发布评论