java web day8

JSP技术

6.5JSP动作元素

6.5.1<jsp:include>动作元素

动态包含:把其它资源页面的内容,合并到当前要包含的页面,最后一块输出。
基本语法格式:<jsp:include page=“被包含页面的url” flush=“true或者false”>jsp:include
动态包含特点:多个页面的内容合并输出,多个jsp页面生成多个java文件,编译成多个class文件
静态包含特点:多个页面的内容合并输出,多个jsp页面最终生成一个java文件,编译一个class文件。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%Thread.sleep(5000); %>
included.jsp内的中文<br />
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
dynamiclnclude.jsp内的中文
<br />
<jsp:include page="included.jsp" flush="true" />
</body>
</html>

要等待5秒才会出现includeed.jsp的页面的输出内容。
在这里插入图片描述

6.5.2jsp:forward动作元素:请求转发。

它的作用实现请求转发,效果等同于RequestDispathcer对象的forward方法。
基本语法格式:<jsp:forward page=“转发页面的url地址”></jsp:forward>
转发页面的url地址:不需要携带项目名称,因为转发动作是服务器内部行为。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" >
<title>forward page</title>
</head>
<body>
<p>2020080605013 gongyuquan</p>
<jsp:forward page="date.jsp" />
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page import="java.util.Date" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
date.jsp页面用来输出当前时间
<%out.print(new Date().toLocaleString()); %>
<%out.print(new java.util.Date()); %>
</body>
</html>

在这里插入图片描述

6.6案例:传智书城jsp页面

6.6.1.实现首页面

  注意事项:1.在html网页不能书写与jsp相关的内容。
	   2.${pageContext.request.contextPath}:作用就是获取项目名称的路径,比如:/chapter07
  设计首页面步骤:
   1.创建一个index.jsp页面,在这里实现跳转到首页面的效果

在这里插入图片描述

     <jsp:forward page="" ></jsp:forward>

6.6. 2.修改client目录下面的所有html文件,修改成jsp,为了就是jsp知识点。

在这里插入图片描述要在里面jsp中加入<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>

6.6. 3.把client目录下面的首页面分离出来几个jsp文件,分离的jsp文件比较通用性,在其它页面也能用到,

分离的目的:提高代码的复用性。
分离index.jsp页面:
第一部分:导航菜单,对应head.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body class="main">
	<!-- 1.网上书城顶部 start -->
<div id="divhead">
	<table cellspacing="0" class="headtable">
		<tr>
			<td>
				<a href="index.html">
					<img src="images/logo.png" width="200" height="60" border="0" /> 
				</a>
			</td>
			<td style="text-align:right">
				<img src="images/cart.gif" width="26" height="23" style="margin-bottom:-4px" />&nbsp;<a href="#">购物车</a> 
				| <a href="#">帮助中心</a> 
				| <a href="#">我的帐户</a>
				| <a href="${pageContext.request.contextPath} /client/register.jsp">新用户注册</a>							
			 
			</td>		
		</tr>
	</table>
</div>
</body>
</html>

第二部分:搜索栏,对应menu_search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="divmenu">
		<a href="#">文学</a> 
		<a href="#">生活</a> 
		<a href="#">计算机</a> 
		<a href="#">外语</a> 
		<a href="#">经管</a>
		<a href="#">励志</a> 
		<a href="#">社科</a> 
		<a href="#">学术</a> 
		<a href="#">少儿</a>
		<a href="#">艺术</a> 
		<a href="#">原版</a> 
		<a href="#">科技</a> 
		<a href="#">考试</a> 
		<a href="#">生活百科</a> 
		<a href="#" style="color:#FFFF00">全部商品目录</a>		
</div>
<div id="divsearch">
<form action="#" id="searchform">
	<table width="100%" border="0" cellspacing="0">
		<tr>
			<td style="text-align:right; padding-right:220px">
				Search 
				<input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"
				onmouseover="this.focus();"
				onclick="my_click(this, 'textfield');"
				onBlur="my_blur(this, 'textfield');"/> 
				<a href="#">
					<img src="images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/> 
				</a>
			</td>
		</tr>
	</table>
</form>
</div>
</body>
</html>

第三部分:底部信息,对应foot.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="divfoot">
		<table width="100%" border="0" cellspacing="0" >
			<tr>
				<td rowspan="2" style="width:10%">
					<img src="images/logo.png" width="195" height="50"
					style="margin-left:175px" />
				</td>
				<td style="padding-top:5px; padding-left:50px">
					<a href="#">
						<font color="#747556"><b>CONTACT US</b></font> 
					</a>
				</td>
			</tr>
			<tr>
				<td style="padding-left:50px">
					<font color="#CCCCCC">
						<b>COPYRIGHT 2015 &copy; BookStore All Rights RESERVED.</b> 
					</font>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>
      在index.jsp页面引入分离的文件:<%@ include file="" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- 导入首页轮播图css和js脚本 -->
<link type="text/css" href="css/autoplay.css" rel="stylesheet" />
<script type="text/javascript" src="js/autoplay.js"></script>

</head>
<body class="main">
	<!-- 1.网上书城顶部 start -->
<%@include file="head.jsp" %> 
	<!-- 网上书城顶部  end -->
<%@include file="menu_search.jsp" %>
	<!--2. 网上书城菜单列表  start -->

<!-- 网上书城菜单列表  end -->

<!-- 3.网上书城首页轮播图  start -->
	<div id="box_autoplay">
    	<div class="list">
        	<ul>
            	<li><img src="ad/index_ad1.jpg" width="900" height="335" /></li>
            	<li><img src="ad/index_ad2.jpg" width="900" height="335" /></li>
            	<li><img src="ad/index_ad3.jpg" width="900" height="335" /></li>
            	<li><img src="ad/index_ad4.jpg" width="900" height="335" /></li>
            	<li><img src="ad/index_ad5.jpg" width="900" height="335" /></li>
        	</ul>
    	</div>
	</div>
	<!-- 网上书城首页轮播图  end -->
	<!--4. 公告板和本周热卖  start -->
    <div id="divcontent">
		<table width="900px" border="0" cellspacing="0">
			<tr>
				<td width="497">
				
					<img src="images/billboard.gif" width="497" height="38" />
					<table cellspacing="0" class="ctl">
						<tr>
							<td width="485" height="29">
                            尊敬的网上书城用户,   <br />
  为了让大家有更好的购物体验,325日起,当日达业务关小黑屋回炉升级!<br />具体开放时间请留意公告,感谢大家的支持与理解,祝大家购物愉快!<br />
        323<br />
        传智播客 网上书城系统管理部<br />
                            </td>
						</tr>
					</table>
				</td>
				<td style="padding:5px 15px 10px 40px">
					<table width="100%" border="0" cellspacing="0">
						<tr>
							<td>
								<img src="images/hottitle.gif" width="126" height="29" />
							</td>
						</tr>
					</table>
					<table width="100%" border="0" cellspacing="0">
						<tr>						
							<td style="width:80; text-align:center">
								<a href="#">
								<img src="bookcover/105.jpg" width="102" height="130" border="0" />
								</a>
								<br /> 
							</td>		
							<td style="width:80; text-align:center">
								<a href="#">
								<img src="bookcover/106.jpg" width="102" height="130" border="0" />
								</a>
								<br /> 
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
<!-- 公告板和本周热卖  end -->	

<!--5. 网上书城底部 start -->
	<%@include file="foot.jsp" %>
	<!-- 网上书城底部  end -->
</body>
</html>

在这里插入图片描述

2020080605013

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值