jsp中使用java输出动态页面 jsp如何实现动态页面

转载

mob64ca13faa4e6 2024-01-03 16:07:05

文章标签 jsp中使用java输出动态页面 jsp html java HTML 文章分类 Java 后端开发

课堂练习

一、实验内容
二、实验目的
三、实验过程

代码1
代码2

一、实验内容

创建JSP动态网页以及页面请求的处理

二、实验目的

掌握JSP页面的基本结构和创建方法
理解JSP页面运行机制
熟练掌握JSP中变量和方法的声明，脚本元素用法
理解JSP指令、动作和自定义标记的基本要点

三、实验过程

1、使用 Eclipse 新建web工程，首先创建三个页面：登录页面(login.jsp)、登录成功页面(success.jsp)、登录登陆失败页(failure.jsp)，再创建处理页面请求服务端程序(process.jsp)。
处理流程如下：

用户在登录页面输入用户名和密码，若输入正确跳转到登录成功页面，页面显示用户名和密码信息，否则跳转到登录失败页面，页面显示“用户名或密码错误!”。
【创建工程，选择动态——Dynamic Web Project】

代码1

<%@ 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>
<style>
 		div{
 			text-align:left;
 			color:red;
 			width:220px;
 		}
 		.text1{
 			border-radius:8px;
 			width:200px;
 			height:25px;
 		}
 		.loct{
 		margin-left:70px;
 		}
 		.loctn{
 		margin-left:10px;
 		}
		 table{
			 margin: 0 auto;
		 }
 		
</style>
</head>

<body style="text-align: center;">
	<h2>登录</h2>
	<form action="process.jsp" method="post">
		<table>
				<tr><td>账号:</td>
				<td ><input class="text1" name="username" type="text"  onBlur="loginame()" size="20" ></td>
				<td><div id="user"></div></td>
				
				<tr><td>密码:</td>
				<td ><input class="text1" name="password" type="text"  onBlur="passwact()" size="20" ></td>
				<td><div id="pasw"></div></td>
				</tr>
				<tr>
					<td><input class="loct" type=submit id="login1" value="登录" ></td>
					<td><input class="loctn" type=reset id="reset" value="重置" ></td>
				</tr>
		</table>
	</form>
</body>
</html>

jsp中使用java输出动态页面 jsp如何实现动态页面_java

process.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>
</head>

<body style="text-align: center;">
<%  
    String getuser=request.getParameter("username");
    String getpasw=request.getParameter("password");
    if(getuser.equals("cbbbb")&&getpasw.equals("123456")){
    %>
    <jsp:forward page="success.jsp"/>
	<% 
   }
    else{
    %>
	<jsp:forward page="failure.jsp"/>
	<% 
   }
%>
</body>
</html>

success.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>
</head>
<body style="text-align:center;">
<h1 style = "color:red ">登录成功!JSP欢迎您！</h1>
用户名：cbbbb<br>
密码：123456
</body>
</html>

jsp中使用java输出动态页面 jsp如何实现动态页面_html_02

faliure.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>
</head>
<body style="text-align:center;">
<h1 style = "color:red ">登录失败!用户名或密码错误！</h1>
</body>
</html>

jsp中使用java输出动态页面 jsp如何实现动态页面_jsp中使用java输出动态页面_03

2、创建两个页面：
登录美食选择页面(foodList.jsp)、
显示选择结果页面(yourChoice.jsp),
操作界面如下：

jsp中使用java输出动态页面 jsp如何实现动态页面_html_04

jsp中使用java输出动态页面 jsp如何实现动态页面_jsp中使用java输出动态页面_05

代码2

foodList.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>
</head>
<body style="text-align:center">
<form action="yourChoice.jsp" method="post">

<table border=1 align=center cellspacing=0 cellpadding=30>
<caption style="font-weight:bold;font-size:30">你想吃什么呢？</caption>
<tr>
    <th>编号</th>
    <th>名称</th>
    <th>图片</th>
    <th>价格</th>
    <th>选择</th>
</tr>
<tr>
    <td>001</td>
    <td>盖浇饭</td>
    <td><img alt="" src="001.png" width="100px" height="100px"></td>
    <td>20</td>
    <td><input type="checkbox" name="foods" value="001"></td>
</tr>
<tr>
    <td>002</td>
    <td>臭豆腐</td>
    <td><img alt="" src="002.png" width="100px" height="100px"></td>
    <td>5</td>
    <td><input type="checkbox" name="foods" value="002"></td>
</tr>
<tr>
    <td>003</td>
    <td>肉夹馍</td>
    <td><img alt="" src="003.png" width="100px" height="100px"></td>
    <td>10</td>
    <td><input type="checkbox" name="foods" value="003"></td>
</tr>
<tr>
    <td>004</td>
    <td>麻辣烫</td>
    <td><img alt="" src="004.png" width="100px" height="100px"></td>
    <td>25</td>
    <td><input type="checkbox" name="foods" value="004"></td>
</tr>
<tr>
    <td colspan=5>
         <input type=submit value="提交">
    </td>
</tr>
</table>
</form>
</body>
</html>

yourChoice.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"  import="java.util.*"%>
    
<!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>
<style type="text/css">
tr{
	width:100px;
	height:60px;
}

</style>
</head>
<body style="text-align:center">
<h1 style="font-weight:bold">你真会吃!</h1>
<hr>
<table border=1 align=center cellspacing=0 cellpadding=30>
<tr>
    <td>编号</td>
    <td>名称</td>
    <td>图片</td>
    <td>价格</td>
</tr>
<%
String[] food1 = { "001", "盖浇饭", "001.png", "20" };
String[] food2 = { "002", "臭豆腐", "002.png", "5" };
String[] food3 = { "003", "肉夹镆", "003.png", "10" };
String[] food4 = { "004", "麻辣烫", "004.png", "25" };
Map<String,String[]> m=new HashMap<String,String[]>();
m.put("001",food1);
m.put("002",food2);
m.put("003",food3);
m.put("004",food4);

String[] foods=request.getParameterValues("foods");
String[] foodchoice=null;
int count=0;
for(int i=0;i<foods.length;i++){
	foodchoice=m.get(foods[i]);
%>
<tr>
    <td><%=foodchoice[0] %></td>
    <td><%=foodchoice[1] %></td>
    <td><img alt="" src="<%=foodchoice[2] %>" width="100px" height="100px"></td>
    <td><%=foodchoice[3] %></td>
</tr>
<%
     count = count + Integer.valueOf(foodchoice[3]);
}
%>
</table>
总计：<%=count %>元
</body>
</html>