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

weakish 發布于2019-08-22 13:51 / 3031人閱讀

摘要：利用引入公共的頭部與底部或者多個頁面需要用到的重復的組件，對于新入門的前端來說是很實用的方法，自己也是新手菜鳥一枚，折騰了好久，實現的方法有很多種，這是我個人覺得比較簡單方便的首先得把公用的頭部與底部分開創建模板，，這里我舉例主頁面引入頭

利用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 引入菜單頁金融云與公共云的差異

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92524.html

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

摘要：利用引入公共的頭部與底部或者多個頁面需要用到的重復的組件，對于新入門的前端來說是很實用的方法，自己也是新手菜鳥一枚，折騰了好久，實現的方法有很多種，這是我個人覺得比較簡單方便的首先得把公用的頭部與底部分開創建模板，，這里我舉例主頁面引入頭利用ajax引入公共的頭部與底部或者多個頁面需要用到的重復的組件，對于新入門的前端來說是很實用的方法，自己也是新手菜鳥一枚，折騰了好久，實現的方法有...

adam1q84 2019-08-01 18:24 評論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