关于多个页面同样内容的引入

在开发项目Music-J时,遇到多页面相同内容的问题。通过三种方法解决:1. Web服务器的SSI命令,需要配置服务器;2. 服务器端动态语言如PHP的页面包含;3. 客户端AJAX加载。最终,使用AngularJS的ngInclude指令,实现高效且方便地引入重复内容,替代AJAX技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在做一个项目,取名为Music-J,哈哈,够霸气吧!不错,Music大家都懂,我爱音乐。J就是我名字的简称啦!

在完成项目的过程中,我也遇到了之前一直有的问题,就是很多页面中都会有一部分的样式内容一模一样,最初的做法就是直接将相同的代码在每个页面复制粘贴,但后来的话就是把多个页面中完全一样的内容,单独提取出来作为一个独立的文件(如header.html、footer.html),凡是需要此文件的页面,引入该页面即可。在网上搜了几种方法,供大家参考:

方法1:

利用Web服务器的SSI命令:客户端请求一个页面,服务器一次返回多个页面——需要修改Web服务器配置文件。

方法2:

使用服务器端动态语言提供的页面包含函数:如PHP

include('header.php');

....echo '主体';

include('footer.php');

客户端请求一个页面,服务器返回多个PHP页面组合后的一个页面。

方法3:

在客户端使用AJAX技术:先加载一个页面的主体内容,加载完成后,再去请求header.html、footer.html放到空容器中

<div id="header"></div>

<main>XXXXXXXX</main>

<div id="footer"></div>

-----------------------------------------

$.ready(function(){

$('#header').load('header.html');

$('#footer').load('footer.html');

})

但这些都不是重点!!!

前端时间自学了AngularJS后,发现它的指令库特别强大!!!于是查了一下AngularJS的操作文档,果然发现了一个指令ngInclude:

<div ng-include=" 'tpl/header.html'"></div>

非常好用,大家也可以试试,可以完全代替方法3!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值