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

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

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

//指定头部
$(function(){
	$.ajax({
	type:"get",
	url:"../js/header.html",
	dataType:"html",
	async:false,
	success:function(data){
		$(".header").append(data);
	}
	});
})
//指定底部
$(function(){
	$.ajax({
	type:"get",
	url:"../js/footer.html",
	dataType:"html",
	async:false,
	success:function(data){
		$(".footer").append(data);
	}
	});
})

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

$(function(){
function getHtml(part){
			$.ajax({
			type:"get",
			url:"../js/"+ part +".html",
			dataType:"html",
			async:false,
			success:function(data){
			$("." + part).append(data);
			}
		})
     
	}
    getHtml('header');//输出头部
    getHtml('footer');//输出底部
});

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

点赞

发表评论