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

adam1q84 发布于2019-08-01 18:24 / 494人阅读

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

利用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));          
        }});  
    })

成功引入的效果图：

GPU云服务器云服务器 php 引入头部 php 引入头部文件 html 引入菜单页金融云与公共云的差异

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51711.html

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

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

weakish 2019-08-22 13:51 评论0 收藏0
打造一个“精致的”个人博客

摘要：百度统计先注册个百度统计的账号站长账号，适合个人博客，注册成功后按照提示，把代码复制到中的的标签里这里特指我的博客文件好了，这样你的博客就差不多了，是不是感觉很酷今天就到这儿，下篇文章见。我为什么要写博客？其实我最初打算写博客，原因很简单，我就是想把工作中、学习中遇到的问题及解决方案记录下来，它能帮你梳理下整个过程的要注意的地方，写写你在工作中遇到的问题，用来记录和回顾。Tips:...

用户83 2019-08-22 10:46 评论0 收藏0
HTML静态页面引用公共的头部和底部(目前亲测的几种静态页面方法）

摘要：亲测方法三会出现滚动条。个人认为方法一在静态页面中的使用比较合适这里不提iframe，主要因为设计网页相对比较困难，占用线程较多，速度慢，而且也不利于搜索引擎的对头尾的收录方法一：通过load()函数，分别引入公共头部和底部文件; header.html 顶部页面头部 ...

tigerZH 2019-08-26 10:56 评论0 收藏0
【Geek议题】合理的VueSPA架构讨论（上）

摘要：下面也是以模块的模块集为例，可以发现和路由有一些不同就是这里为了防止模块跟全局耦合，运用函数式编程思想类似于依赖注入，将全局的实例作为函数参数传入，再返回出一个包含的对象，这个导出的对象将会被以模块名命名，合并到全局的集中。前言 web前端发展到现代，已经不再是严格意义上的后端MVC的V层，它越来越向类似客户端开发的方向发展，已独立拥有了自己的MVVM设计模型。前后端的分离也使前端人...

worldligang 2019-08-22 15:53 评论0 收藏0