JSP动态网页技术

于 2021-05-23 13:18:14 发布
阅读量2k 收藏 34
点赞数 6
分类专栏： # Web技术应用基础——JSP 文章标签： jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45823118/article/details/117192134
版权

课堂练习

一、实验内容

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

二、实验目的

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

三、实验过程

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

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

代码1

login.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>
<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>

在这里插入图片描述
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>

在这里插入图片描述
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>

在这里插入图片描述

2、创建两个页面：
登录美食选择页面(foodList.jsp)、
显示选择结果页面(yourChoice.jsp),
操作界面如下：
在这里插入图片描述
在这里插入图片描述

代码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>

【今天吃了很多个饺子还有汤圆，该圆滚滚的睡午觉啦~】

句子君:
我们可以轻易的躲开一头大象，却总是躲不开苍蝇。使我们不快乐的，也往往是一些芝麻绿豆般的小事。生活中的小细节莫轻视，多用点心把幸福掌握！

少年游四方
关注
  • 6
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JSP技术
qq_55680228的博客
11-19 772
什么是JSP JSP 全名是 Java Server Pages ，它是建立在 Swevlet 规范之上的动态网页开发技术。在JSP文件中，HTML 代码与 Java 代码共存，其中，HTML 代码用来实现网页中静态内容的显示，Java 代码用来实现网页中动态内容的显示。为了与传统 HTML 有所区别，JSP 文件的扩展名为.jsp。 创建一个JSP文件 JSP基本语法 1.JSP Scriptlets JSP Scriptlets 是一段代码段。当需要使用 Java 实现一些复杂的操作或控制时，可以使用
JSP动态网站技术入门与提高.(孙晓龙&赵莉)
12-01
JSP动态网站技术入门与提高.(孙晓龙&赵莉) 人民邮电出版社
Jsp技术
hyp520520的博客
10-31 2011
JSP的运行机制、JSP脚本元素、JSP指令元素、JSP动作元素、JSP九大内置对象JSP的运行机制、JSP脚本元素、JSP指令元素、JSP动作元素、JSP九大内置对象
JSP页面时间动态显示
渣
08-04 3381
iLife's 博客http://blog.csdn.net/fei1502816 function startTime(){ var today=new Date() var week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); var year=today.getYear() var month
JSP动态网页
weixin_34357962的博客
04-22 158
01.什么是服务器 02.什么是动态网页 动态网页是指在服务器端运行的，使用程序语言设计的交互式网页，它们会根据某种条件的变化，返回不同的网页内容。可以让用户和服务器交互的网站 动态网站可以实现交互功能，如用户注册、信息发布、产品展示、订单管理等等； 动态网页并不是独立存在于服务器的网页文件，而是浏览器发出请求时才反馈网页； 动态网页中包含有服务器端脚本，所以页面文件名常以as...
JSP动态网页制作技术.doc
最新发布
12-21
JSP（JavaServer Pages）是一种结合了跨平台与跨网站效劳器机制，以Java为主的技术来产生动态网页。它与微软的ASP（Active Server Pages）相容，但使用类似HTML的标签以及Java代码片段，而不是VBScript。当网站效劳...
JSP动态网页开发技术概述
01-08
　JSP（Java Server Pages）是建立在Servlet规范之上的动态网页开发技术，其实质是一个简化的Servlet。在JSP文件中，HTML和Java代码共同存在，其中，HTML代码用于实现网页中静态内容的显示，Java代码用于实现网页中...
基于JSP的动态网站开发技术
01-08
随着Web技术的发展和电子商务时代的到来，人们不再满足于建立各种静态地发布信息的网站，更多的时候需要能与用户进行交互，并能提供后台数据库的管理和控制等服务的动态网站。 动态网站开发技术 早期的动态网站开发...
JSP动态网站技术入门与提高
09-10
这本书应该说是对WEB技术及JSP、JAVA技术入门的一本好书！以讲述Java Server Page（JSP）技术为主，定位在JSP的入门与提高上，由浅及深，有理论讲解，也有实例练习，既适合没有互联网技术基础的初学者阅读，也适合已...
jsp动态网页学习
03-11
jsp指令标签(page,taglib,include)、动态标签(jsp:include,jsp:forward,jsp:param,jsp：useBean，jsp:setProperty,jsp:getProperty)，案例demo
编写jsp动态网页
weixin_34221773的博客
03-14 627
默认情况下，jsp网页必须保存在TOMCAT_HOME/webapps目录下才能被客户请求。 JSP网页的主题仍然是html标签，在需要显示动态数据的地方添加<%%>标记，在其中编写合法的java语句。 1 <%@page language="java" pageEncoding="utf-8" contentType="text/html" %> ...
JSP网页动态开发
silence_noisy的博客
09-16 871
JSP动态网站开发1web程序开发 <p>网站前端：html5 js jquery ajax css ps flash json xml</p> <p> 网站后端(服务器):jsp php asp.net</p> 网站构成：运行平台 web服务器和应用服务器 服务器端脚本 客户端脚本 数据库静态网页：静态网页是不能随便改动的，静态是一次性写好放在服务器上进行浏览
免费学习JSP动态网页技术指南
JSP (Java Server Pages) 是一种基于Servlet规范的动态网页技术，它允许在网页模板中嵌入Java脚本，以动态处理和返回数据。JSP的主要特点是结合了脚本语言（如JavaScript、Java）和静态HTML、CSS，提供强大的页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

少年游四方

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值