六、JSP技术
6.5 JSP动作元素
JSP动作元素用来控制JSP的行为,执行一些常 用的JSP页面动作。通过动作元素可以实现使用多行Java代码能够实现的效果,如包含页面文件、实现请求转发等。
6.5.1 < jsp:include >动作元素
在JSP页面中,为了把其他资源的输出内容插入到当前JSP页面的输出内容中,JSP技术提供了jsp:include动作元素,jsp:include 动作元素的具体语法格式如下所示:
<jsp:include page="relativeURL" 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页面的中文--------->这个就是被包含的页面。
</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">
<title>Insert title here</title>
</head>
<body>
dynamicInclude页面的中文-------->包含页面<br/>
<jsp:include page="included.jsp"></jsp:include>
</body>
</html>
在浏览器搜索后等待五秒
< jsp:forward >动作元素
< jsp:forward >动作元素将当前请求转发到其他Web资源(HTML页面、JSP页面和Servlet等),在执行请求转发后的当前页面将不再执行,而是执行该元素指定的目标页面。其格式如下:
<jsp:forward page="relativeURL" />
<%@ 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>Insert title here</title>
</head>
<body>
转发到欢迎页面:
<jsp:forward page="welcome.jsp"></jsp:forward>
</body>
</html>
<%@ 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>Insert title here</title>
</head>
<body>
欢迎您来访问,当前访问时间:
<% out.println(new java.util.Date().toLocaleString()); %>
</body>
</html>
6.6 传智书城JSP页面
将client文件夹复制到WebContent目录下,并将所有 .html文件改为 .jsp文件修改之后效果:
此时使用浏览器访问http://localhost:9999/chapter07/client/index.jsp会出现乱码问题,只需要在每一个jsp文件中都加上
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
即可。
虽然此时表面看来index.jsp可以正常访问了,但当点击页面右上角的“新用户注册”时,会发现浏览器报出“404”错误。这个时候需要修改页面中“新用户注册”链接的代码,修改之后为:
<a href="${pageContext.request.contextPath}/client/register.jsp">新用户注册</a>
之后将index.jsp页面的顶部,菜单列表,底部代码抽取出来(创建新的JSP文件并在index.jsp页面相应位置添加一个链接)
最后将注册页面的公共页面部分(顶部,菜单列表,底部)加入与index.jsp页面相同的链接即可
代码如下:
<%@ 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="${pageContext.request.contextPath}/client/css/main.css" type="text/css" />
<!-- 导入首页轮播图css和js脚本 -->
<link type="text/css" href="${pageContext.request.contextPath}/client/css/autoplay.css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath}/client/js/autoplay.js"></script>
</head>
<body class="main">
<!-- 1.网上书城顶部 start -->
<%@include file="head.jsp" %>
<!-- 网上书城顶部 end -->
<!--2. 网上书城菜单列表 start -->
<%@include file="menu_search.jsp" %>
<!-- 网上书城菜单列表 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 />
为了让大家有更好的购物体验,3月25日起,当日达业务关小黑屋回炉升级!<br />具体开放时间请留意公告,感谢大家的支持与理解,祝大家购物愉快!<br />
3月23日<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>
<%@ 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>
<title> 表单校验 </title>
</head>
<body>
<h3>注册页面</h3>
<form action="registersuccess.html" method="get" onsubmit="return checkForm();" >
用户名:<input type="text" name="username" id="usernameId" onkeyup="checkName();"/>
<span id="usernameMsg"></span><br/><br/>
密码: <input type="password" name="password" id="passwordId" onkeyup="checkPassword();"/>
<span id="passwordMsg"></span><br/><br/>
手机号:<input type="text" name="phone" id="phoneId" onkeyup="checkPhone();" />
<span id="phoneMsg"></span><br/><br/>
<input type="submit" value="注册" />
</form>
</body>
<script type="text/javascript">
/*表单校验*/
//1.定义全局变量用来接收标记对象
var usernameObj;
var passwordObj;
var phoneObj;
var usernameMsg;
var passwordMsg;
var phoneMsg;
//2.获取标记对象
window.onload=function(){
//2.1获取输入控件的标记对象
usernameObj = document.getElementById("usernameId");
passwordObj = document.getElementById("passwordId");
phoneObj = document.getElementById("phoneId");
//2.2 获取错误信息的标记对象
usernameMsg = document.getElementById("usernameMsg");
passwordMsg = document.getElementById("passwordMsg");
phoneMsg= document.getElementById("phoneMsg");
}
//表单校验,通过返回true或者flase 来控制表单是否提交。
function checkForm(){
var usernameFlag= checkName();
var passwordFlag = checkPassword();
var phoneFlag = checkPhone();
return usernameFlag && passwordFlag && phoneFlag;
}
//3.校验用户名
function checkName(){
//3.1获取用户名
var value = usernameObj.value;
//3.2 创建正则表达式来校验用户名
var regex=/^[a-zA-Z]\w{3,6}$/; // 用户名以不分大小写的字母开始,包含字母、数字、下划线,长度4-7位
//3.3 校验
if(value==""){ // !value 等同于 value==""
usernameMsg.innerHTML = "用户名必须填写";
return false;
} else if( !regex.test(value)){
usernameMsg.innerHTML = "用户名必须以字母开始,不区分大小写,包含数字、字母、下划线,长度4-7位";
return false;
}else {
usernameMsg.innerHTML ="";
return true;
}
}
// 4.校验密码
function checkPassword(){
//4.1 获取用户输入的密码
var value = passwordObj.value;
//4.2 创建正则表达式
var regex = /^[a-zA-Z0-9]{3,6}$/;//密码是字母和数字组成,长度是3-6位
//4.3 校验
if(!value){
passwordMsg.innerHTML = "|密码不能为空";
return false;
}else if(!regex.test(value)){
passwordMsg.innerHTML = "密码是字母和数字组成,长度是3-6位";
return false;
}else {
passwordMsg.innerHTML = "";
return true;
}
}
// 5.校验手机号
function checkPhone(){
//5.1 获取手机号
var value = phoneObj.value;
//4.2 创建正则表达式
var regex = /^1[3|5|7|8][0-9]{9}$/;//手机号开始1,第二位是3,或者5,或者7,或者8,后面9位任意写
//4.3 校验
if(!value){
phoneMsg.innerHTML = "手机号为空";
return false;
}else if(!regex.test(value)){
phoneMsg.innerHTML = "手机号符合规范";
return false;
}else {
phoneMsg.innerHTML = "";
return true;
}
}
</script>
</html>
<%@ 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" />
<script type="text/javascript" src="js/form.js"></script>
</head>
<body class="main">
<!-- 1.网上书城顶部 start -->
<%@include file="head.jsp" %>
<!-- 网上书城顶部 end -->
<!--2. 网上书城菜单列表 start -->
<%@include file="menu_search.jsp" %>
<!-- 网上书城菜单列表 end -->
<!-- 3.网上书城用户注册 start -->
<div id="divcontent" align="center">
<form action="registersuccess.html" method="post" onsubmit="return checkForm();">
<table width="850px" border="0" cellspacing="0">
<tr>
<td style="padding: 30px"><h1>新会员注册</h1>
<table width="70%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align: right; width: 20%">会员邮箱:</td>
<td style="width: 40%">
<input type="text" class="textinput" id="email" name="email" onkeyup="checkEmail();"/>
</td>
<td colspan="2"><span id="emailMsg"></span><font color="#999999">请输入有效的邮箱地址</font></td>
</tr>
<tr>
<td style="text-align: right">会员名:</td>
<td><input type="text" class="textinput" id="username" name="username" onkeyup="checkUsername();"/>
</td>
<td colspan="2"><span id="usernameMsg"></span><font color="#999999">字母数字下划线1到10位, 不能是数字开头</font></td>
</tr>
<tr>
<td style="text-align: right">密码:</td>
<td><input type="password" class="textinput" id="password" name="password" onkeyup="checkPassword();"/></td>
<td><span id="passwordMsg"></span><font color="#999999">密码请设置6-16位字符</font></td>
</tr>
<tr>
<td style="text-align: right">重复密码:</td>
<td>
<input type="password" class="textinput" id="repassword" name="repassword" onkeyup="checkConfirm();"/>
</td>
<td><span id="confirmMsg"></span> </td>
</tr>
<tr>
<td style="text-align: right">性别:</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked" /> 男
<input type="radio" name="gender" value="女" /> 女
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">联系电话:</td>
<td colspan="2">
<input type="text" class="textinput"
style="width: 350px" name="telephone" />
</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right">个人介绍:</td>
<td colspan="2">
<textarea class="textarea" name="introduce"></textarea>
</td>
<td> </td>
</tr>
</table>
<table width="70%" border="0" cellspacing="0">
<tr>
<td style="padding-top: 20px; text-align: center">
<input type="image" src="images/signup.gif" name="submit" border="0"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<!-- 网上书城用户注册 end -->
<!--4. 网上书城下方显示 start -->
<%@include file="foot.jsp" %>
<!--4. 网上书城下方显示 end -->
</body>
</html>
<%@ 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>Insert title here</title>
</head>
<body>
<center>
<font color="green" size="7">注册成功</font>
</center>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 1.网上书城顶部 start -->
<div id="divhead">
<table cellspacing="0" class="headtable">
<tr>
<td>
<a href="#">
<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" /> <a href="#">购物车</a>
| <a href="#">帮助中心</a>
| <a href="#">我的帐户</a>
| <a href="${pageContext.request.contextPath}/client/register.jsp">新用户注册</a>
</td>
</tr>
</table>
</div>
<!-- 网上书城顶部 end -->
<%@ 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="search()"/>
</a>
</td>
</tr>
</table>
</form>
</div>
<!-- 网上书城菜单列表 end -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--5. 网上书城底部 start -->
<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 © BookStore All Rights RESERVED.</b>
</font>
</td>
</tr>
</table>
</div>
<!-- 网上书城底部 end -->
2020080605012