利用ajax 引入靜態(tài)頁(yè)公共的頭部與底部

adam1q84 發(fā)布于2019-08-01 18:24 / 539人閱讀

摘要：利用引入公共的頭部與底部或者多個(gè)頁(yè)面需要用到的重復(fù)的組件，對(duì)于新入門(mén)的前端來(lái)說(shuō)是很實(shí)用的方法，自己也是新手菜鳥(niǎo)一枚，折騰了好久，實(shí)現(xiàn)的方法有很多種，這是我個(gè)人覺(jué)得比較簡(jiǎn)單方便的首先得把公用的頭部與底部分開(kāi)創(chuàng)建模板，，這里我舉例主頁(yè)面引入頭

利用ajax引入公共的頭部與底部或者多個(gè)頁(yè)面需要用到的重復(fù)的組件，對(duì)于新入門(mén)的前端來(lái)說(shuō)是很實(shí)用的方法，自己也是新手菜鳥(niǎo)一枚，折騰了好久，實(shí)現(xiàn)的方法有很多種，這是我個(gè)人覺(jué)得比較簡(jiǎn)單方便的

首先得把公用的頭部與底部分開(kāi)創(chuàng)建html模板，header.html,asdier-bar.html，footer.html,這里我舉例主頁(yè)面引入頭部與左側(cè)菜單欄，如下圖：

1、公共頭部頁(yè)面

2、公共左側(cè)菜單頁(yè)面

3、主體頁(yè)面引入

接下來(lái)下面是最重要的：首先得在主頁(yè)引入juqery插件，然后在主頁(yè)面引入下面的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));          
        }});  
    })

成功引入的效果圖：

云服務(wù)器 GPU云服務(wù)器 php 引入頭部 php 引入頭部文件 html 引入菜單頁(yè) 金融云與公共云的差異

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/51711.html

相關(guān)文章

利用ajax 引入靜態(tài)頁(yè)公共的頭部與底部

摘要：利用引入公共的頭部與底部或者多個(gè)頁(yè)面需要用到的重復(fù)的組件，對(duì)于新入門(mén)的前端來(lái)說(shuō)是很實(shí)用的方法，自己也是新手菜鳥(niǎo)一枚，折騰了好久，實(shí)現(xiàn)的方法有很多種，這是我個(gè)人覺(jué)得比較簡(jiǎn)單方便的首先得把公用的頭部與底部分開(kāi)創(chuàng)建模板，，這里我舉例主頁(yè)面引入頭利用ajax引入公共的頭部與底部或者多個(gè)頁(yè)面需要用到的重復(fù)的組件，對(duì)于新入門(mén)的前端來(lái)說(shuō)是很實(shí)用的方法，自己也是新手菜鳥(niǎo)一枚，折騰了好久，實(shí)現(xiàn)的方法有...

weakish 2019-08-22 13:51 評(píng)論0 收藏0
打造一個(gè)“精致的”個(gè)人博客

摘要：百度統(tǒng)計(jì)先注冊(cè)個(gè)百度統(tǒng)計(jì)的賬號(hào)站長(zhǎng)賬號(hào)，適合個(gè)人博客，注冊(cè)成功后按照提示，把代碼復(fù)制到中的的標(biāo)簽里這里特指我的博客文件好了，這樣你的博客就差不多了，是不是感覺(jué)很酷今天就到這兒，下篇文章見(jiàn)。我為什么要寫(xiě)博客？其實(shí)我最初打算寫(xiě)博客，原因很簡(jiǎn)單，我就是想把工作中、學(xué)習(xí)中遇到的問(wèn)題及解決方案記錄下來(lái)，它能幫你梳理下整個(gè)過(guò)程的要注意的地方，寫(xiě)寫(xiě)你在工作中遇到的問(wèn)題，用來(lái)記錄和回顧。Tips:...

用戶(hù)83 2019-08-22 10:46 評(píng)論0 收藏0
HTML靜態(tài)頁(yè)面引用公共的頭部和底部(目前親測(cè)的幾種靜態(tài)頁(yè)面方法）

摘要：親測(cè)方法三會(huì)出現(xiàn)滾動(dòng)條。個(gè)人認(rèn)為方法一在靜態(tài)頁(yè)面中的使用比較合適這里不提iframe，主要因?yàn)樵O(shè)計(jì)網(wǎng)頁(yè)相對(duì)比較困難，占用線(xiàn)程較多，速度慢，而且也不利于搜索引擎的對(duì)頭尾的收錄方法一：通過(guò)load()函數(shù)，分別引入公共頭部和底部文件; header.html 頂部頁(yè)面頭部 ...

tigerZH 2019-08-26 10:56 評(píng)論0 收藏0
【Geek議題】合理的VueSPA架構(gòu)討論（上）

摘要：下面也是以模塊的模塊集為例，可以發(fā)現(xiàn)和路由有一些不同就是這里為了防止模塊跟全局耦合，運(yùn)用函數(shù)式編程思想類(lèi)似于依賴(lài)注入，將全局的實(shí)例作為函數(shù)參數(shù)傳入，再返回出一個(gè)包含的對(duì)象，這個(gè)導(dǎo)出的對(duì)象將會(huì)被以模塊名命名，合并到全局的集中。前言 web前端發(fā)展到現(xiàn)代，已經(jīng)不再是嚴(yán)格意義上的后端MVC的V層，它越來(lái)越向類(lèi)似客戶(hù)端開(kāi)發(fā)的方向發(fā)展，已獨(dú)立擁有了自己的MVVM設(shè)計(jì)模型。前后端的分離也使前端人...

worldligang 2019-08-22 15:53 評(píng)論0 收藏0