以下就讲header.html了 footer.html同理
<!--在一个html head标签中,引入了include.js,-->
<!--导入布局js,共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<!--省略...-->
<!--引入头部-->
<!--省略...-->
<div id="header"></div>
下面这一行的意思,就是取请求header.html和footer.html页面,利用jquery
在设置了在id位header的地方添加header.html页面内容
//文件名include.js
$(function () {
$.get("header.html",function (data) {
$("#header").html(data);
});
$.get("footer.html",function (data) {
$("#footer").html(data);
});
});
以下为header.html
<!--在页面加载完成之后执行该函数-->
<script>
$(function () {
//1.通过ajax来发送数据接收数据
$.get("findUserServlet",{},function (data) {
var msg = "欢迎回来 " + data.name;
$("#span_username").html(msg);
});
});
</script>
<!-- 头部 start -->
<header id="header">
<div class="top_banner">
<img src="images/top_banner.jpg" alt="">
</div>
<div class="shortcut">
<!-- 未登录状态 -->
<div class="login_out">
<a href="login.html">登录</a>
<a href="register.html">注册</a>
</div>
<!-- 登录状态 -->
<div class="login">
<span id="span_username"></span>
<a href="myfavorite.html" class="collection">我的收藏</a>
<a href="javascript:location.href='exitServlet';">退出</a>
</div>
</div>
<div class="header_wrap">
<div class="topbar">
<div class="logo">
<a href="/"><img src="images/logo.jpg" alt=""></a>
</div>
<div class="search">
<input name="" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
<a href="javascript:;" class="search-button">搜索</a>
</div>
<div class="hottel">
<div class="hot_pic">
<img src="images/hot_tel.jpg" alt="">
</div>
<div class="hot_tel">
<p class="hot_time">客服热线(9:00-6:00)</p>
<p class="hot_num">400-618-9090</p>
</div>
</div>
</div>
</div>
</header>
<!-- 头部 end -->
<!-- 首页导航 -->
<div class="navitem">
<ul class="nav">
<li class="nav-active"><a href="index.html">首页</a></li>
<li><a href="route_list.html">门票</a></li>
<li><a href="route_list.html">酒店</a></li>
<li><a href="route_list.html">香港车票</a></li>
<li><a href="route_list.html">出境游</a></li>
<li><a href="route_list.html">国内游</a></li>
<li><a href="route_list.html">港澳游</a></li>
<li><a href="route_list.html">抱团定制</a></li>
<li><a href="route_list.html">全球自由行</a></li>
<li><a href="favoriterank.html">收藏排行榜</a></li>
</ul>
</div>
总结:通过JavaScript来使多个页面之间互联
好处:提高了header.html和footer.html的复用率,在网站布局中更加便于维护和使用。