实验五 JSP编程

news/2024/10/18 10:56:09/

实验五 JSP编程

目的：
1、理解和掌握JSP基本语法
2、掌握JSP表单元素及表单传值过程中的中文编码处理
3、掌握JSP的指令和动作，熟练掌握page指令的下面的属性：import、 errorPage、isErrorPage、contentType、pageEncoding。

实验要求：
1、通过集成环境编辑、部署和运行Web工程
2、要求提交实验报告，将代码及实验结果截图放入报告中，实验报告按照“学号_姓名.docx”进行命名。

实验过程：
1、输入并运行下面的import_test.jsp页面：

<%@ page import="java.util.Date,java.text.DateFormat;" %>
<html>
<head><title>page指令示例</title></head>
<body>
<h3 align="center">使用page指令导入java.util.Date类</h3>
<% Date date = new Date(); String s = DateFormat.getDateInstance().format(date);String s2 = DateFormat.getDateInstance(DateFormat.FULL).format(date);
%>
<p align="center">现在的时间是：<%=s%>
<p align="center">现在的时间是：<%=s2%>
</body>
</html>

访问上述JSP页面，输出结果如下图所示：
图1 import_test.jsp页面的运行结果
可以看到页面中最后一行的中文显示为乱码，将下面代码加到JSP页面中：

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

重新访问页面，中文显示正常。这说明可以使用page指令的contentType属性指定页面输出使用的字符编码。默认情况下，JSP页面使用的字符集是iso-8859-1编码，如使用汉字编码应指定为 UTF-8 或 GBK 。

2、errorPage属性和isErrorPage属性的使用。
【步骤1】下面的hello.jsp页面执行时将抛出一个异常，它指定了错误处理页面为errorHandler.jsp。

<%@ page contentType="text/html;charset=gb2312" %><%@ page errorPage="errorHandler.jsp" %>
<html>
<body>
<%String name = request.getParameter("name");
if (name == null){
throw new RuntimeException("没有指定name 属性。");
}
%>
Hello, <%= name %>
</body>
</html>

【步骤2】下面的errorHandler.jsp是错误处理页面。

<%@ page contentType="text/html; charset=gb2312" %>
<%@ page isErrorPage="true" %>
<html>
<body>
请求不能被处理：<%=exception.getMessage()%><br>
请重试！
</body>
</html>

用下面的URL访问hello.jsp页面，就会产生下面结果：
http://localhost:8080/bookstore/hello.jsp
图6.3 errorHandler.jsp页面的运行结果
这说明没有提供name参数，hello.jsp页面中抛出RuntimeException异常，所以调用错误页面。
如果使用下面URL访问hello.jsp页面，将产生下面正常的页面：
http://localhost:8080/bookstore/hello.jsp?name=Mary
图6.4 hello.jsp页面的运行结果
注意：如果请求参数值使用汉字，仍然产生乱码，例如：
http://localhost:8080/bookstore/hello.jsp?name=欧阳清风
这是因为请求参数默认使用iso-8859-1编码传递，如果要正确显示中文，应将请求参数编码转换为gb2312编码。
按下面方法修改hello.jsp页面，将请求参数值编码转换为汉字编码。

<%@ page contentType="text/html;charset=gb2312" %>
<%@ page errorPage="errorHandler.jsp" %>
<html><body>
<%
String name = request.getParameter("name");
if (name==null){throw new RuntimeException("没有指定name 属性。");
}
else{// 将字符串name的字符编码转换为汉字编码name = new String(name.getBytes("iso-8859-1"),"gb2312");
}
%>
Hello, <%=name %>
</body></html>

此时，还会出现中文乱码吗，应如何处理？

答：还会出现中文乱码。
应该将页面的 contentType 改为 UTF-8。

修改后代码为：

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page errorPage="errorHandler.jsp" %>
<html>
<body>
<%String name = request.getParameter("name");if (name==null){throw new RuntimeException("没有指定name 属性。");}%>
Hello, <%=name %>
</body>
</html>

2、完成如下要求
a)编写页面1，声明计算阶乘的方法，该页面能够接收一个参数，并将该参数转换为数值，计算该数值的阶乘，最后在页面上输出结果。
b)编写页面2，编写表单使之能够接受用户输入的数值，并提交到页面1进行阶乘计算并显示计算结果。
页面1：
factorial.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>计算阶乘</title>
</head>
<body>
<%!//声明计算阶乘的方法long factorial(int n) {if (n == 0) return 1;else return n * factorial(n - 1);}
%>
<%//获取传递的参数值String param = request.getParameter("number");int number = Integer.parseInt(param);//调用计算方法long result = factorial(number);
%><p>阶乘为：<%= result %></p>
</body>
</html>

页面2：
input.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>阶乘计算</title>
</head>
<body>
<form action="factorial.jsp" method="get"><label for="number">请输入一个数值：</label><input type ="number" id="number" name="number" required><input type="submit" value="计算阶乘">
</form></body>
</html>

在这里插入图片描述

3、按要求完成如下实验。
1）表单处理
a)编写表单页面regUser.jsp
b)表单提交到页面UserInfo.jsp，显示注册信息。
c) 要求页面提交时使用javascript脚本对表单元素进行检查，如必填字段、邮件、电话的格式检查以及字段长度的检查等。注意中文的处理。

regUser.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>新用户注册</title><style>.required { /*“必填”的颜色*/color: red;}.main{width: 400px;height: 600px;margin: 0 auto 0 auto;  /*居中*/background-color: white;display: flex;}</style>
</head>
<body>
<h1 style="color: deeppink; text-align: center;">新用户注册</h1>
<%--method="post" 用于确保表单数据的传输安全、可靠，并允许传输大量数据。post请求--%>
<form action="UserInfo.jsp" method="post" id="myform"><table align="center" ><tr><td style="padding-right: 70px;">用户名：</td><td><input type="text" id="username" name="username" required></td><td class="required">*必填</td></tr><tr><td>用户密码：</td><td><input type="password" id="password" name="password" required></td><td class="required">*必填</td></tr><tr><td>确认密码：</td><td><input type="password" id="confirm_password" name="confirm_password" required></td><td class="required">*必填</td></tr><tr><td>真实姓名：</td><td><input type="text" id="realname" name="realname" required></td><td class="required">*必填</td></tr><tr><td>性别：</td><td><input type="radio" id="male" name="gender" value="男" checked><label for="male">男</label><input type="radio" id="female" name="gender" value="女"><label for="female">女</label><br></td></tr><tr><td>出生日期：</td><td><!-- 设置输入框宽度 --><input id="year" name="year" style="width: 40px">年<select id="month" name="month"></select>月<input id="day" name="day" style="width: 40px">日</td></tr></table><table  align="center" style="padding-left: 60px;"><tr><td style="padding-right: 54px;">电子邮件：</td><td><input type="email" id="email" name="email" style="width: 280px;"></td></tr><tr><td>联系电话：</td><td><input type="tel" id="phone" name="phone" style="width: 280px;"></td></tr><tr><td>联系地址：</td><td><textarea id="address" name="address" style="width: 260px; height: 100px;"></textarea></td></tr><tr><td> <input type="submit" value="提交" style="margin-left: 50px;"> </td><td> <input type="submit" value="重置" style="margin-left: 100px;"> </td></tr></table></form><script>javascript">function generateMonths() {var select = document.getElementById("month");for (var i = 1; i <= 12; i++) {var option = document.createElement("option");option.value = i;option.text = i;select.appendChild(option);}}window.onload = function() {generateMonths();document.getElementById("myform").onsubmit = function(){//this.name.value this 指向的是 document.getElementById("myform")var username = this.username.value;var password = this.password.value;var confirm_password = this.confirm_password.value;var email = this.email.value;var phone = this.phone.value;var error = "";//验证用户名 不用判断是否为空，输出的时候就会提示必填//以字母开始，无论大小都可以；可以是字母数、字下、划线,可以包含5到15个字符var judge = /^[A-Za-z_][A-Za-z0-9_]{5,15}$/;// if(!judge.test(username)){//     error += "·用户名必须以字母开头\n";// }if(username.length < 5 || username.length > 15){error += "·用户名为5到15个字符\n";}//验证两个密码是否一样if(password != confirm_password){error += "·密码必须一致\n";}//验证邮箱// 验证电子邮件地址格式var judge2 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;if(!judge2.test(email) ){error += "·邮箱格式不正确\n";}//验证电话号码if(phone.length > 11 || phone.length < 11){error += "·手机号错误\n";}if(error == ""){alert("提交成功！");return true;}else{alert(error);return false;}}};
</script>
</body>
</html>

UserInfo.jsp:

<%--Created by IntelliJ IDEA.User: a1830Date: 2024/10/12Time: 19:46To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>注册信息</title>
</head>
<body>
<h1>用户信息</h1>
<table><tr><td>用户名：</td><td><%= request.getParameter("username") %></td></tr><tr><td>密码：</td><td><%= request.getParameter("password") %></td></tr><tr><td>真实姓名：</td><td><%= request.getParameter("realname") %></td></tr><tr><td>性别：</td><td><%= request.getParameter("gender") %></td></tr><tr><td>出生日期：</td><td><%= request.getParameter("year")+"年"+request.getParameter("month")+"月"+request.getParameter("day")+"日" %></td></tr><tr><td>邮箱：</td><td><%= request.getParameter("email") %></td></tr><tr><td>电话：</td><td><%= request.getParameter("phone") %></td></tr><tr><td>地址：</td><td><%= request.getParameter("address") %></td></tr>
</table>
</body>
</html>

在这里插入图片描述

4、实验心得。
学习了JSP页面的基本构成，包括页面指令、脚本元素等，并生成动态的网页内容。JSP结合了Java的强大功能和HTML的易用性，使得开发过程更加灵活和高效。


http://www.ppmy.cn/news/1539981.html

相关文章

vue项目中使用websocket

vue项目中使用websocket

一、单文件中引入使用 <template></template> <script>export default {websocket: true, // 标志需要使用WebSocketdata () {return {ws: null}},created () {this.ws new WebSocket(ws://127.0.0.1:8000); // ws服务地址this.ws.onopen () > {// 接收…
阅读更多...
使用Three.js和Force-Directed Graph实现3D知识图谱可视化

使用Three.js和Force-Directed Graph实现3D知识图谱可视化

先看样式&#xff1a; 在当今信息爆炸的时代&#xff0c;如何有效地组织和展示复杂的知识结构成为一个重要的挑战。3D知识图谱可视化是一种直观、交互性强的方式来呈现知识之间的关系。本文将详细介绍如何使用HTML、JavaScript、Three.js和Force-Directed Graph库来实现一个交互…
阅读更多...
网页复制粘贴助手，Chrome网页复制插件(谷歌浏览器复制插件)

网页复制粘贴助手，Chrome网页复制插件(谷歌浏览器复制插件)

一款解决网页限制复制问题的插件&#xff0c;当你遇到限制复制粘贴和右键的网页是不是很头痛&#xff1f;安装这个插件后&#xff0c;点下插件按钮就能解决了 碰到这种情况 也是非常头疼 chrome拓展-chrome插件-强制复制 当我们浏览网页的时候&#xff0c;看到感兴趣的内容就…
阅读更多...
华为云Flexus云服务：性能倍增、体验跃级

华为云Flexus云服务：性能倍增、体验跃级

在数字化转型的浪潮中&#xff0c;企业对云计算的需求日益增长&#xff0c;尤其是在性能和体验方面。华为云Flexus云服务应运而生&#xff0c;为企业提供了一个性能倍增、体验跃级的云计算解决方案。下面九河云就来给大家介绍一下华为云Flexus云服务吧。 1. 性能倍增 华为云…
阅读更多...
【JAVA面试题】什么是Springboot的自动配置以及注意事项

【JAVA面试题】什么是Springboot的自动配置以及注意事项

文章目录 强烈推荐核心概念&#xff1a;自动配置的关键特点&#xff1a;示例&#xff1a; 需要注意的点1.默认配置可能不适合所有场景2.Bean 冲突与覆盖3.应用启动慢的问题4.过度依赖自动配置5.安全性问题6.依赖冲突与版本兼容7.过多不必要的自动配置8.调试困难 专栏集锦 强烈推…
阅读更多...
设计模式-原型模式（克隆、Clone、Prototype）

设计模式-原型模式（克隆、Clone、Prototype）

原型模式&#xff08;克隆、Clone、Prototype&#xff09;是一种创建型设计模式&#xff0c; 使你能够复制已有对象&#xff0c; 而又无需使代码依赖它们所属的类。 问题 譬如美国研制了一种特效药&#xff0c;而且还在专利保护器内&#xff0c;而印度制药公司看中了&#xff0…
阅读更多...
QT IEEE754 16进制浮点数据转成10进制

QT IEEE754 16进制浮点数据转成10进制

IEEE754标准转换QT代码 qtcreator使用的ieee754标准的4字节数组与浮点数之间的转换方法&#xff0c;ieee754的4位数组如果转换成二进制后&#xff0c;大体结构是&#xff1a; 位序号12-910-32意义 符号位&#xff0c; 正数为0&#xff0c;负数为1. 指数位&#xff0c; 指数是…
阅读更多...
YOLO11 目标检测 | 导出ONNX模型 | ONNX模型推理

YOLO11 目标检测 | 导出ONNX模型 | ONNX模型推理

本文分享YOLO11中&#xff0c;从xxx.pt权重文件转为.onnx文件&#xff0c;然后使用.onnx文件&#xff0c;进行目标检测任务的模型推理。 用ONNX模型推理&#xff0c;便于算法到开发板或芯片的部署。 备注&#xff1a;本文是使用Python&#xff0c;编写ONNX模型推理代码的 目…
阅读更多...
最新文章

Copyright @ 2022~2023