利用ajax 引入静态页公共的头部与底部

利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件，对于新入门的前端来说是很实用的方法，自己也是新手菜鸟一枚，折腾了好久，实现的方法有很多种，这是我个人觉得比较简单方便的

首先得把公用的头部与底部分开创建html模板，header.html,asdier-bar.html，footer.html,这里我举例主页面引入头部与左侧菜单栏，如下图：

1、公共头部页面

2、公共左侧菜单页面

3、主体页面引入

接下来下面是最重要的：首先得在主页引入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));
        }});
    })

    

成功引入的效果图：