通过ajax输出公共头部和底部

本文介绍了一种利用AJAX技术简化网页头部和底部等公共组件复用的方法,通过编写简洁的JavaScript代码实现页面元素的高效加载及维护。

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

原文链接:https://blog.retechs.cn/945.html

在一些页面里面,我们经常会遇到一些相同部分,而且是大批量的,如果一个一个修改,太耗时间,那么我们怎么把这些公共起来,便于维护呢?

这是我通过AJAX的方法,来获取指定格,把一些公共的部分输出:
这里指定了头部和底部

//指定头部
$(函数(){
	$就({
	键入:“搞定”,
	网址: “../ JS / header.html中”,
	数据类型: “HTML”,
	异步:假的,
	成功:功能(数据){
		$( “标题”)附加(数据)。
	}
	});
})
//指定底部
$(函数(){
	$就({
	键入:“搞定”,
	网址: “../ JS / footer.html”
	数据类型: “HTML”,
	异步:假的,
	成功:功能(数据){
		$( “页脚”)追加(数据)。
	}
	});
})

但是上面的这个方法太冗余了,如果多个写的更多,那么我们可以合并一下代码:

$(函数(){
函数getHtml(part){
			$就({
			键入:“搞定”,
			url:“../ js /”+ part +“。html”,
			数据类型: “HTML”,
			异步:假的,
			成功:功能(数据){
			$(“。”+ part).append(data);
			}
		})
     
	}
    getHtml( '报头'); //输出头部
    getHtml( '页脚'); //输出底部
});

注:这里我们的AJAX是通过JQ写的,所以页面一定要引入JQ文件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值