利用ajax 引入靜態頁公共的頭部與底部

利用ajax引入公共的頭部與底部或者多個頁面須要用到的重複的組件，對於新入門的前端來講是很實用的方法，本身也是新手菜鳥一枚，折騰了很久，實現的方法有不少種，這是我我的以爲比較簡單方便的

首先得把公用的頭部與底部分開建立html模板，header.html,asdier-bar.html，footer.html,這裏我舉例主頁面引入頭部與左側菜單欄，以下圖：

一、公共頭部頁面

二、公共左側菜單頁面

三、主體頁面引入

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

成功引入的效果圖：