JavaWeb-06 JSP

wuchangjian2021-11-15 16:08:42编程学习

在Eclipse中,创建一个名称为chapter06的Web项目。

编写第一个JSP文件

右键单击WebContent目录→[new]→[Other],在弹出的窗口中找到JSP文件。

 填完JSP文件名称HelloWorld后,单击[Next]按钮,采用默认设置。单击[Finish]按钮后第一个jsp文件创建成功。

在body标签内编辑如下内容:

<body>
	Pidan
	<%	
		response.getWriter().print("hello jsp");
	%>
</body>

启动Tomcat并在浏览器访问HelloWorld.jsp文件

从图中可以看出,HelloWorld.jsp中添加的内容已被显示出来,这说明了HTML中的元
素可以被JSP容器所解析。JSP只是在原有的HTML文件中加入了一些具有Java特点
的代码,这些代码具有其独有的特点,称为JSP的语法元素。 

JSP基本语法

1. JSP Scriptlets
用于当需要使用Java实现一些复杂操作或控制时,
JSP Scriptlets 的语法格式:

<% java代码(变量、方法、表达式等)%>

 2.JSP声明语句
JSP的声明语句用于声明变量和方法,它以“<%!”开始,以“%>”结束,其语法格式:

<%!
定义的变量或方法等
%>

在chaptero6项目的WebContent目录下创建一个名称为example01.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>
	<%!
		int a=1 ,b=2;
	%>
	<%!
		public String print(){
			String str = "pidan";
			return str;
	}
	%>
<body>
	<%
		out.println(a+b);
	%>
	<br/>
	<%
		out.println(print());
	%>
</body>
</html>

 启动Tomcat并在浏览器访问example01.jsp文件

 JSP表达式(expression)用于将程序数据输出到客户端,它将要输出的变量或者表达式直接封装在以“<%=”开头和以“%>”结尾的标记中,其基本的语法格式

<%=a+b %><br/>
<%=print() %>

6.2.2JSP注释
同其他各种编程语言一样,JSP也有自己的注释方式,其基本语法格式

<%--注释信息--%>

在chapterO6项目的WebContent目录下创建一个名称为example02的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>
	<!-- 这是一个HTML注释 -->
	<%--这是一个JSP注释 --%>
</body>
</html>

 启动Tomcat并在浏览器访问example02.jsp文件,按F12查看源文件

JSP指令

include指令 

在chapterO6项目的WebContent目录下创建两个JSP页面文件date.jsp和include.jsp,在clude.jsp文件中使用 include指令将date.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>
	<%
		out.println(new java.util.Date().toLocaleString());
	%>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>欢迎你</title>
</head>
<body>
	欢迎你pidan,现在的时间是:
	<%@
		include file="date.jsp"
	%>
</body>
</html>

  启动Tomcat并在浏览器访问include.jsp文件

 JSP隐式对象

在chapterO6项目的WebContent目录下创建一个名称为out.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
 buffer="0kb"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
	<%
		out.println("first line<br />");
		response.getWriter().println("sercond line<br />");
	%>
</body>
</html>

  启动Tomcat并在浏览器访问out.jsp文件

 在chapterO6项目的WebContent目录下创建一个名称为pageContext.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
	<%
		HttpServletRequest req=(HttpServletRequest)pageContext.getRequest();
	
		pageContext.setAttribute("req11","pageContext",pageContext.PAGE_SCOPE);
		pageContext.setAttribute("req22","dashuju",pageContext.REQUEST_SCOPE);
		pageContext.setAttribute("req33","session",pageContext.SESSION_SCOPE);
		pageContext.setAttribute("req","application",pageContext.APPLICATION_SCOPE);
		%>
		<%=pageContext.findAttribute("req") %>
		<hr />
		<%=(String)req.getAttribute("req22") %>
</body>
</html>

  启动Tomcat并在浏览器访问pageContext.jsp文件

 在chapterO6项目的WebContent目录下创建一个名称为exception.jsp的页面,在其中编发生异常的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="error.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		int a=3;
		int b=0;
	%>
	输出:<%=a/b %>
</body>
</html>

在WebContent目录下创建一个名称为error.jsp的页面,在其中获取从exception.jsp页面中传递过来的exception对象。在其page指令中要将 isErrorPage属性设置为true

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isErrorPage="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	输出异常信息:<%=exception.getMessage() %>
	<br/><br/>
	2020080604029HYS
</body>
</html>

  启动Tomcat并在浏览器访问exception.jsp文件

JSP动作元素 

(1)在chapterO6项目的WebContent目录下编写两个JSP文件,分别是included.jsp和dinclude.jsp。其中,dinclude.jsp 页面用于引入 included.jsp 页面。included.jsp作为被引入的文件,让它暂停5秒钟后才输出内容,这样,可以方便测试<jsp:include>标签的flush属性。

<%@ 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>
	<%Thread.sleep(5000); %>
	included 被包含的页面

</body>
</html>
<%@ 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>
	dinclude页面用来包含其他页面
	<br/>
	<jsp:include page="included.jsp" flush="true"></jsp:include>
</body>
</html>

  启动Tomcat并在浏览器访问dinclude.jsp文件

  五

  秒

  后

修改dynamiclnclude.jsp文件,将<jsp:include>动作元素中的flush属性设置为false,刷新浏览器,再次访问,这时,浏览器等待5秒后,将输出内容同时显示了出来。由此可见,Tomcat调用被引入的资源included.jsp时,并没有将当前JSP页面中已输出的内容刷新到客户端。

编写一个用于实现转发功能的 jspforward.jsp页面和一个用于显示当前时间的welcome.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>
	转发到其他页面:
	<jsp:forward page="welcome.jsp"></jsp:forward>
</body>
</html>
<%@ 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>
	我是welcome文件
</body>
</html>

启动Tomcat并在浏览器访问jspforward.jsp文件

阶段案例:传智书城JSP页面

在chapter06项目的WebContent目录下创建一个名称为index.jsp的页面文件,该文件使
jsp:forword>动作元素跳转到项目客户端展示的首页,其主要代码

<jsp:forward page="/client/index.jsp"></jsp:forward>

将第1章中传智书城案例中的client文件夹复制到WebContent目录下,并将client文件夹下的所有.html文件改为.jsp文件

如果此时运行项目,并访问“http://localhost:8080/chapter06/client/index.jsp”,会发现页面中的中文都是乱码。需要将每一个JSP文件中都加上page指令

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

此时当点击“新用户注册”链接后,所访问的链接路径是/chapternfregister.jsp,而项目中注册页面的真实路径是/chapter06/client/register.jsp,所以出现了“404错误。要解决此问题,只需在index.jsp页面文件中的链接和图片等路径前,加入“${pageContext.request.contextPath}/client/” 

<a href="${pageContext.request.contextPath}/register.jsp">新用户注册</a>

(1)在client文件夹下创建一个名称为head.jsp的文件,将传智书城 index.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="#">
					<img src="${pageContext.request.contextPath}/client/images/logo.png" width="200" height="60" border="0" /> 
				</a>
			</td>
			<td style="text-align:right">
				<img src="${pageContext.request.contextPath}/client/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中。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<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="${pageContext.request.contextPath}/client/images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/> 
				</a>
			</td>
		</tr>
	</table>
</form>
</div>

(3)在client文件夹下创建一个名称为foot.jsp的文件,将传智书城 index.jsp中底部的代码抽取出到foot.jsp中。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="divfoot">
		<table width="100%" border="0" cellspacing="0" >
			<tr>
				<td rowspan="2" style="width:10%">
					<img src="${pageContext.request.contextPath}/client/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>

(4)使用include指令将抽取出的3个JSP页面包含在index.jsp中。

 

 

启动Tomcat 服务器,在浏览器地址栏中输入地址“http://localhost:8080/chapter06/index.jsp”

 实现注册页面

在修改index.jsp页面代码时,已将页面顶部、菜单列表和底部的代码抽取到了单独的jsp页面,并使用include指令包含了这些公共页面。这种方式在传智书城注册页面中也同样适用

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<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" />
<script type="text/javascript" src="${pageContext.request.contextPath}/client/js/form.js"></script>
</head>
<body class="main">
	<!-- 1.网上书城顶部 start -->
<div id="divhead">
	<table cellspacing="0" class="headtable">
		<tr>
			<td>
				<a href="index.html">
					<img src="${pageContext.request.contextPath}/client/images/logo.png" width="200" height="60" border="0" /> 
				</a>
			</td>
			<td style="text-align:right">
				<img src="${pageContext.request.contextPath}/client/images/cart.gif" width="26" height="23" style="margin-bottom:-4px" />&nbsp;<a href="#">购物车</a> 
				| <a href="#">帮助中心</a> 
				| <a href="#">我的帐户</a>
				| <a href="register.jsp">新用户注册</a>							
			 
			</td>		
		</tr>
	</table>
</div>
	<!-- 网上书城顶部  end -->
	<!--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="${pageContext.request.contextPath}/client/images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/> 
				</a>
			</td>
		</tr>
	</table>
</form>
</div>
<!-- 网上书城菜单列表  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>&nbsp;</td>
							</tr>
							<tr>
								<td style="text-align: right">性别:</td>
								<td colspan="2">&nbsp;&nbsp;
                                <input type="radio" name="gender" value="男" checked="checked" /> 男
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" name="gender" value="女" /> 女
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td style="text-align: right">联系电话:</td>
								<td colspan="2">
								<input type="text" class="textinput"
									style="width: 350px" name="telephone" />
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td style="text-align: right">个人介绍:</td>
								<td colspan="2">
								<textarea class="textarea" name="introduce"></textarea>
								</td>
								<td>&nbsp;</td>
							</tr>
						</table>

						<table width="70%" border="0" cellspacing="0">
							<tr>
								<td style="padding-top: 20px; text-align: center">
									<input type="image" src="${pageContext.request.contextPath}/client/images/signup.gif" name="submit" border="0"/>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</form>
	</div>
    <!-- 网上书城用户注册  end -->
	<!--4. 网上书城下方显示 start -->
	<%@include file="foot.jsp" %>
       <!--4. 网上书城下方显示 start -->
</body>
</html>

启动Tomcat服务器,进入首页后,点击页面右上角的“新用户注册”链接进入用户注册页面

 

相关文章

【前端系列教程之CSS3】02_CSS基础选择器和基础常用样式

【前端系列教程之CSS3】02_CSS基础选择器和基础常用样式

CSS3从入门到精通视频直通车:         CSS3从入门到精通&...

React react-transition-group实现动画

css3动画: import React, { Component }...

简单排序(c语言)

有一个10个整数的序列,要求对其重新排序。排序要求: 1.奇数在前&#x...

NFS服务的使用

1. 基础配置 修改两个节点的主机名,第一台机器为nfs-server&...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。