【NEW06】JSP 动作元素

---

一、JSP 动作元素

---

1. < jsp:include>动作元素

(1)创建included.jsp和dynamiclnclude.jsp文件，included.jsp作为被引入的文件,让他暂停5秒钟后才输出内容。

(2) 启动Tomcat 服务器。

(3)修改dynamiclnclude.jsp文件，将< jsp:include>动作元素中的flush属性设置为false，运行结果如下：

这时dynamiclnclude.jsp页面中的输出内容，等待5秒后，才会显示included.jsp的内容。

2. < jsp:forward> 动作元素

---

（1）首先编写一个用于实现转发功能的jspforward.jsp页面和一个用于显示当前时间的welcome.jsp页面。

二、 阶段案例: 书城JSP页面

---

1.导入html文件，并修改为.jsp文件。

2.解决第一次运行的乱码问题。

在每一个jsp文件里加入如下内容：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

3.修改JSP页面中的地址和链接。

我们点击右上角的新用户注册，会发现报错，仔细观察是路径问题。

要解决问题，只需要在index.jsp页面文件中的链接和图片等路径前，加入如下代码：

${
   pageContext.request.contextPath}/client/

这样查找文件时，是以绝对路径找的，项目中只要有相应文件，就不会出现找不到文件的错误。

4.抽取页面代码。

将项目中重复的代码抽取出到一个新的JSP页面，然后通过JSP的include指令来引入这些抽取出的JSP页面。

（1）在client文件夹下创建一个名称为head.jsp的文件，将书城的index.jsp中顶部的代码抽取出到head.jsp中。其中，head.jsp页面的代码如下所示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


<div id="divhead">
	<table cellspacing="0" class="headtable">
		<tr>
			<td>
				<a href="index.jsp">
					<img src="${pageContext.request.contextPath}/client/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>

(2) 在client文件夹下创建一个名称为menu_search.jsp的文件，将书城的index.jsp中菜单列表的代码抽取出到menu_search.jsp中。其中，menu_search.jsp页面的代码如下所示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!--2. 网上书城菜单列表  start -->
<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