30、Servlet、JSP与HTML表单综合应用解析

keras9composer

于 2025-08-05 14:37:18 发布

阅读量21

点赞数

CC 4.0 BY-SA版权

分类专栏： Servlets与JSP深度解析文章标签： Servlet JSP HTML表单

本文链接：https://blog.youkuaiyun.com/keras9composer/article/details/150464276

Servlets与JSP深度解析专栏收录该内容

42 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

Servlet、JSP与HTML表单综合应用解析

1. Servlet与JSP输出展示示例

有一个前端页面用于查看JSP和Servlet的原始输出。以下是其对应的HTML代码示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>Viewing JSP and Servlet Output</TITLE>
</HEAD>
<BODY BGCOLOR="#FDF5E6">
<H1 ALIGN="CENTER">Viewing JSP and Servlet Output</H1>
Enter a relative URL of the form /path/name and, optionally,
any attached GET data you want to send. The raw HTML output
of the specified URL (usually a JSP page or servlet) will be
shown. Caveats: the URL specified cannot contain the string
<CODE>&lt;/TEXTAREA&gt;</CODE>, and attached GET data works
only with servlet engines that support version 2.2.
<FORM ACTION="/servlet/coreservlets.ShowPage">
  <CENTER>
    URL: 
    <INPUT TYPE="TEXT" NAME="url" SIZE=50 VALUE="/"><BR>
    GET Data:
    <INPUT TYPE="TEXT" NAME="data" SIZE=50><BR><BR>
    <Input TYPE="SUBMIT" VALUE="Show Output">
  </CENTER>
</FORM>
</BODY>
</HTML>

此页面允许用户输入相对URL和可选的GET数据，提交后会显示指定URL的原始HTML输出。不过要注意，指定的URL不能包含 </TEXTAREA> 字符串，且附加的GET数据仅在支持2.2版本的Servlet引擎中有效。

2. JSP页面的请求转发

常见的请求转发场景是请求先到达Servlet，然后Servlet将请求转发到JSP页面。这是因为检查请求参数和设置Bean需要大量编程，在Servlet中进行这些操作更为方便；而使用JSP页面作为目标页面，是因为它简化了HTML内容的创建过程。

但这并非唯一的请求转发方式，目标页面也可以是Servlet，JSP页面同样可以将请求转发到其他地方。例如，一个JSP页面通常会呈现某种类型的结果，只有在接收到意外值时才会将请求转发到其他地方。

在JSP中，使用 jsp:forward 动作来转发请求比在脚本中包装 RequestDispatcher 代码更简单易用，其形式如下：

<jsp:forward page="Relative URL" />

page 属性可以包含JSP表达式，以便在请求时计算目标地址。示例代码如下：

<% String destination;
if (Math.random() > 0.5) {
destination = "/examples/page1.jsp";
} else {
destination = "/examples/page2.jsp";
}
%>
<jsp:forward page="<%= destination %>" />

这段代码会将大约一半的访问者发送到 http://host/examples/page1.jsp ，另一半发送到 http://host/examples/page2.jsp 。

3. HTML表单的使用

HTML表单可作为Servlet或其他服务器端程序的前端，提供简单可靠的用户界面控件，用于收集用户数据并将其传输到Servlet。

3.1 HTML表单的数据传输方式

HTML表单中的每个控件通常都有一个名称和一个值，名称在HTML中指定，值来自原始HTML或用户输入。当表单提交时，所有活动元素的名称和值会被收集成一个字符串，格式为 Name1=Value1&Name2=Value2...NameN=ValueN 。这个字符串可以通过两种方式发送到指定的URL：
- HTTP GET方法 ：将字符串追加到指定URL的末尾，跟在问号后面。
- HTTP POST方法 ：先将POST请求行、HTTP请求头和一个空行发送到服务器，然后在接下来的一行发送数据字符串。

以下是使用GET和POST方法的简单表单示例：
- GET方法示例（GetForm.html） ：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>A Sample Form Using GET</TITLE>
</HEAD>
<BODY BGCOLOR="#FDF5E6">
<H2 ALIGN="CENTER">A Sample Form Using GET</H2>
<FORM ACTION="http://localhost:8088/SomeProgram">
  <CENTER>
  First name:
  <INPUT TYPE="TEXT" NAME="firstName" VALUE="Joe"><BR>
  Last name:
  <INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P>
  <INPUT TYPE="SUBMIT"> <!-- Press this button to submit form -->
  </CENTER>
</FORM>
</BODY>
</HTML>

POST方法示例（PostForm.html） ：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>A Sample Form Using POST</TITLE>
</HEAD>
<BODY BGCOLOR="#FDF5E6">
<H2 ALIGN="CENTER">A Sample Form Using POST</H2>
<FORM ACTION="http://localhost:8088/SomeProgram"
      METHOD="POST">
  <CENTER>
  First name:
  <INPUT TYPE="TEXT" NAME="firstName" VALUE="Joe"><BR>
  Last name:
  <INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P>
  <INPUT TYPE="SUBMIT">
  </CENTER>
</FORM>
</BODY>
</HTML>

4. FORM元素详解

<FORM> 元素用于创建一个数据输入区域，并指定收集到的数据将传输到的URL。其基本形式如下：

<FORM ACTION="URL" ...> ... </FORM>

<FORM> 元素的主要属性如下表所示：
| 属性 | 说明 |
| ---- | ---- |
| ACTION（必需） | 指定处理表单数据的Servlet或CGI程序的URL，也可以是电子邮件地址 |
| METHOD | 指定数据传输到HTTP服务器的方法，可选值为GET（默认）或POST |
| ENCTYPE | 指定数据在传输前的编码方式，默认是 application/x-www-form-urlencoded ，还支持 multipart/form-data |
| TARGET | 用于支持框架的浏览器，确定显示表单提交结果的框架单元格 |
| ONSUBMIT | 用于JavaScript，在表单提交时执行代码，如果表达式计算结果为false，则表单不提交 |
| ONRESET | 用于JavaScript，在表单重置时执行代码 |
| ACCEPT | 指定Servlet或其他程序必须接受的MIME类型 |
| ACCEPT - CHARSET | 指定Servlet或其他程序必须接受的字符编码 |

下面对部分重要属性进行详细解释：
- ACTION ：指定处理表单数据的URL或电子邮件地址。例如：

<FORM ACTION="http://some.isp.com/servlet/SomeServlet">
FORM input elements and regular HTML
</FORM>

METHOD ：
- GET方法 ：简单易用，用户可以通过在URL后附加适当的数据来访问使用GET的Servlet进行测试和调试。但由于一些浏览器对URL大小有限制，GET请求能附加的数据量有限，且浏览器会在地址栏显示包含附加数据的URL，不适合在公共场合发送敏感数据。
- POST方法 ：数据在单独的一行发送，没有数据量限制，更适合发送敏感数据。
ENCTYPE ：
- 默认编码方式是 application/x-www-form-urlencoded ，客户端会将每个空格转换为加号（+），其他非字母数字字符转换为百分号（%）后跟两个十六进制数字。
- 大多数现代浏览器支持 multipart/form-data 编码，它将每个字段作为MIME兼容文档的单独部分传输，并自动使用POST提交。这种编码方式有时能让服务器端程序更轻松地处理复杂数据，在使用文件上传控件发送整个文档时是必需的。示例代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>Using ENCTYPE="multipart/form-data"</TITLE>
</HEAD>
<BODY BGCOLOR="#FDF5E6">
<H2 ALIGN="CENTER">Using ENCTYPE="multipart/form-data"</H2>
<FORM ACTION="http://localhost:8088/SomeProgram"
      ENCTYPE="multipart/form-data">
  <CENTER>
  First name:
  <INPUT TYPE="TEXT" NAME="firstName" VALUE="Joe"><BR>
  Last name:
  <INPUT TYPE="TEXT" NAME="lastName" VALUE="Hacker"><P>
  <INPUT TYPE="SUBMIT">
  </CENTER>
</FORM>
</BODY>
</HTML>

5. 文本控件

HTML支持三种类型的文本输入元素：文本框、密码字段和文本区域。每种元素都有一个名称，值取自控件的内容。当表单提交时，名称和值会被发送到服务器。

5.1 文本框

HTML元素形式如下：

<INPUT TYPE="TEXT" NAME="..." ...>

文本框的属性如下表所示：
| 属性 | 说明 |
| ---- | ---- |
| NAME（必需） | 指定文本框的名称 |
| VALUE | 指定文本框的初始值 |
| SIZE | 指定文本框的显示宽度 |
| MAXLENGTH | 指定文本框中允许输入的最大字符数 |
| ONCHANGE | 当文本框的值发生变化时触发的事件 |
| ONSELECT | 当文本框中的文本被选中时触发的事件 |
| ONFOCUS | 当文本框获得焦点时触发的事件 |
| ONBLUR | 当文本框失去焦点时触发的事件 |
| ONKEYDOWN | 当按下键盘上的某个键时触发的事件 |
| ONKEYPRESS | 当按下并释放键盘上的某个键时触发的事件 |
| ONKEYUP | 当释放键盘上的某个键时触发的事件 |

文本框可创建单行输入字段，用户可以在其中输入文本，前面的 GetForm.html 、 PostForm.html 和 MultipartForm.html 示例中都有使用。

综上所述，通过上述对Servlet、JSP和HTML表单的介绍，我们了解了如何展示JSP和Servlet的输出、如何在JSP中进行请求转发、HTML表单的数据传输方式以及FORM元素和文本控件的使用。这些知识对于构建Web应用程序非常重要，可以帮助我们创建更高效、更安全的用户界面和服务器端处理逻辑。

6. 按钮控件

HTML表单中的按钮控件主要用于触发特定操作，常见的有提交按钮和重置按钮。

6.1 提交按钮

HTML元素形式如下：

<INPUT TYPE="SUBMIT" VALUE="按钮显示文本">

提交按钮用于将表单数据发送到服务器。当用户点击提交按钮时，表单中的所有数据将按照指定的方式（GET或POST）传输到 ACTION 属性指定的URL。例如在前面的 GetForm.html 和 PostForm.html 示例中都使用了提交按钮：

<INPUT TYPE="SUBMIT" VALUE="Show Output">

6.2 重置按钮

HTML元素形式如下：

<INPUT TYPE="RESET" VALUE="按钮显示文本">

重置按钮用于将表单中的所有输入字段恢复到初始值。例如：

<INPUT TYPE="RESET" VALUE="Reset Form">

按钮控件的属性如下表所示：
| 属性 | 说明 |
| ---- | ---- |
| TYPE | 指定按钮的类型，可选值为 SUBMIT （提交按钮）或 RESET （重置按钮） |
| VALUE | 指定按钮上显示的文本 |

7. 复选框和单选按钮

复选框和单选按钮用于让用户从多个选项中进行选择。

7.1 复选框

HTML元素形式如下：

<INPUT TYPE="CHECKBOX" NAME="选项名称" VALUE="选项值">

复选框允许用户选择多个选项。每个复选框都有一个 NAME 和 VALUE 属性，当复选框被选中时，其 NAME 和 VALUE 会被包含在表单提交的数据中。例如：

<INPUT TYPE="CHECKBOX" NAME="hobbies" VALUE="reading"> Reading
<INPUT TYPE="CHECKBOX" NAME="hobbies" VALUE="swimming"> Swimming
<INPUT TYPE="CHECKBOX" NAME="hobbies" VALUE="running"> Running

7.2 单选按钮

HTML元素形式如下：

<INPUT TYPE="RADIO" NAME="选项组名称" VALUE="选项值">

单选按钮允许用户从一组选项中选择一个。同一组单选按钮必须具有相同的 NAME 属性，这样浏览器才能知道它们属于同一个选项组。例如：

<INPUT TYPE="RADIO" NAME="gender" VALUE="male"> Male
<INPUT TYPE="RADIO" NAME="gender" VALUE="female"> Female

复选框和单选按钮的属性如下表所示：
| 属性 | 说明 |
| ---- | ---- |
| TYPE | 指定控件的类型，可选值为 CHECKBOX （复选框）或 RADIO （单选按钮） |
| NAME | 指定选项的名称或选项组的名称 |
| VALUE | 指定选项的值 |
| CHECKED | 可选属性，若设置为 CHECKED ，则该复选框或单选按钮默认被选中 |

8. 组合框和列表框

组合框和列表框用于提供一组选项供用户选择。

8.1 组合框

HTML元素形式如下：

<SELECT NAME="选项组名称">
  <OPTION VALUE="选项值1">选项显示文本1</OPTION>
  <OPTION VALUE="选项值2">选项显示文本2</OPTION>
  ...
</SELECT>

组合框通常显示一个下拉列表，用户可以从中选择一个选项。例如：

<SELECT NAME="country">
  <OPTION VALUE="USA">United States</OPTION>
  <OPTION VALUE="UK">United Kingdom</OPTION>
  <OPTION VALUE="China">China</OPTION>
</SELECT>

8.2 列表框

HTML元素形式如下：

<SELECT NAME="选项组名称" SIZE="显示行数" MULTIPLE>
  <OPTION VALUE="选项值1">选项显示文本1</OPTION>
  <OPTION VALUE="选项值2">选项显示文本2</OPTION>
  ...
</SELECT>

列表框可以显示多个选项，用户可以选择一个或多个选项（如果设置了 MULTIPLE 属性）。例如：

<SELECT NAME="fruits" SIZE="3" MULTIPLE>
  <OPTION VALUE="apple">Apple</OPTION>
  <OPTION VALUE="banana">Banana</OPTION>
  <OPTION VALUE="orange">Orange</OPTION>
</SELECT>

组合框和列表框的属性如下表所示：
| 属性 | 说明 |
| ---- | ---- |
| NAME | 指定选项组的名称 |
| SIZE | 指定列表框显示的行数 |
| MULTIPLE | 可选属性，若设置，则允许用户选择多个选项 |
| OPTION的VALUE | 指定选项的值 |
| OPTION的SELECTED | 可选属性，若设置为 SELECTED ，则该选项默认被选中 |

9. 文件上传控件

文件上传控件允许用户选择本地文件并将其上传到服务器。

HTML元素形式如下：

<INPUT TYPE="FILE" NAME="文件字段名称">

例如：

<FORM ACTION="http://localhost:8088/UploadServlet" ENCTYPE="multipart/form-data" METHOD="POST">
  <INPUT TYPE="FILE" NAME="uploadFile">
  <INPUT TYPE="SUBMIT" VALUE="Upload File">
</FORM>

需要注意的是，使用文件上传控件时，表单的 ENCTYPE 属性必须设置为 multipart/form-data ，并且提交方法必须为 POST 。

10. 服务器端图像映射

服务器端图像映射允许用户通过点击图像的不同区域来触发不同的操作。

HTML元素形式如下：

<IMG SRC="图像URL" USEMAP="#映射名称">
<MAP NAME="映射名称">
  <AREA SHAPE="形状" COORDS="坐标" HREF="链接URL">
  ...
</MAP>

例如：

<IMG SRC="map.jpg" USEMAP="#myMap">
<MAP NAME="myMap">
  <AREA SHAPE="RECT" COORDS="0,0,100,100" HREF="page1.html">
  <AREA SHAPE="CIRCLE" COORDS="200,200,50" HREF="page2.html">
</MAP>

其中， SHAPE 属性指定区域的形状（如 RECT 表示矩形， CIRCLE 表示圆形）， COORDS 属性指定区域的坐标。

11. 隐藏字段

隐藏字段用于在表单中存储一些用户不可见的数据，这些数据会随着表单一起提交到服务器。

HTML元素形式如下：

<INPUT TYPE="HIDDEN" NAME="字段名称" VALUE="字段值">

例如：

<FORM ACTION="http://localhost:8088/ProcessForm">
  <INPUT TYPE="HIDDEN" NAME="userID" VALUE="12345">
  <INPUT TYPE="TEXT" NAME="username" VALUE="John">
  <INPUT TYPE="SUBMIT" VALUE="Submit">
</FORM>

12. 控件分组和标签

在HTML表单中，可以使用 <FIELDSET> 和 <LEGEND> 元素对控件进行分组，并使用 <LABEL> 元素为控件添加标签。

12.1 控件分组

<FIELDSET>
  <LEGEND>分组标题</LEGEND>
  <!-- 表单控件 -->
</FIELDSET>

例如：

<FIELDSET>
  <LEGEND>Personal Information</LEGEND>
  <INPUT TYPE="TEXT" NAME="firstName" VALUE="John">
  <INPUT TYPE="TEXT" NAME="lastName" VALUE="Doe">
</FIELDSET>

12.2 标签

<LABEL FOR="控件ID">标签文本</LABEL>
<INPUT TYPE="..." ID="控件ID" ...>

例如：

<LABEL FOR="email">Email:</LABEL>
<INPUT TYPE="TEXT" ID="email" NAME="email" VALUE="john.doe@example.com">

13. 表单调试服务器

为了方便调试表单，可以使用一个简单的服务器程序来接收并显示表单提交的所有HTTP信息。例如可以创建一个 EchoServer 程序，无论接收到什么URL和数据，它都会返回一个显示所有HTTP信息的网页。

以下是一个简单的表单数据处理流程的mermaid流程图：

graph TD;
    A[用户填写表单] --> B[点击提交按钮];
    B --> C{提交方法};
    C -- GET --> D[将数据追加到URL后发送];
    C -- POST --> E[先发送请求头，再发送数据];
    D --> F[服务器接收处理];
    E --> F;
    F --> G[服务器返回响应];
    G --> H[浏览器显示结果];

综上所述，通过对HTML表单各种控件和相关元素的详细介绍，我们全面了解了如何使用HTML表单作为Servlet或其他服务器端程序的前端，实现数据的收集和传输。这些知识对于开发Web应用程序具有重要的指导意义，可以帮助我们创建出功能丰富、用户体验良好的表单界面。