利用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',success: function(sView)       {
            $("#aside-bar").append($(sView));          
        }});  
    })

成功引入的效果图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!