利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有很多种,这是我个人觉得比较简单方便的
首先得把公用的头部与底部分开创建html模板,header.html,asdier-bar.html,footer.html,这里我举例主页面引入头部与左侧菜单栏,如下图:
1、公共头部页面
![图片描述 图片描述](https://i-blog.csdnimg.cn/blog_migrate/962798360e16bf94424ce391755ea3a4.png)
2、公共左侧菜单页面
![图片描述 图片描述](https://i-blog.csdnimg.cn/blog_migrate/3a7ebcaa6f90b6fa24a0720f86d15e2d.png)
3、主体页面引入
![图片描述 图片描述](https://i-blog.csdnimg.cn/blog_migrate/ec00bc58ba0815e10525a61b1984afcf.png)
接下来下面是最重要的:首先得在主页引入juqery插件,然后在主页面引入下面的ajax代码
$(function(){
$.ajax({ url:"header.html", context: document.body, success: function(sView){
$("#header").append($(sView));
}});
$.ajax({ url:'aside_bar.html', context: document.body, success: function(sView) {
$("#aside-bar").append($(sView));
}});
})
成功引入的效果图:
![图片描述 图片描述](https://i-blog.csdnimg.cn/blog_migrate/c57cff5c28e2734b61c2a1ed5e780fa9.png)