2.1 表示层（视图层）技术
在Web应用程序中，视图层的设计技术有HTML、JSP、JSTL和EL表达式等。
（1）HTML：是一组标签，负责网页的基本表现形式。
（2）JavaScript：是在客户端浏览器运行的语言，负责在客户端与用户进行互动。
（3）CSS技术：是一个样式表，起到美化整个页面的作用。
（4）JSP技术：是一种运行在服务器端的脚本语言，用来开发动态网页。
（5）EL（Expression Language）：是表达式语言，目前已成为标准规范之一。
2.1.1 HTML技术与应用案例
HTML（Hyper Text Markup Language）即超文本标记语言，是用来编写网页文件的标准，定义了一组标记（tag，也称标签）用来描述Web文档数据。目前HTML已经升级到HTML 5版本。
HTML的主要标签如表2-1所示。在该表中给出了常用标记及其功能说明。在HTML文档设计中，利用表2-1中的有关标签，控制页面的显示内容和显示方式。
表2-1 HTML常用标签与功能说明
在Web应用程序中，使用较多的是表单的设计及表单标签。表2-2给出了表单设计常用的标签。
表2-2 表单设计常用的标签及其作用
【例2-1】设计如图2-1所示的学生信息注册网页。
图2-1 学生信息注册页面
【分析】该页面采用表单的方式设计，为了使页面各元素整齐，采用表格的方式控制元素的位置。该例中给出了表单常用的各种元素，请注意它们的使用特点。
【实现代码】
＜body＞
＜form action=""＞
＜table border="0" align="center" width="600"＞
＜tr＞＜td colspan="3"align="center"height="40"＞填写注册信息＜/td＞＜/tr＞
＜tr＞ ＜td align="right"＞用户名：*＜/td＞
＜td＞＜input type="text" name="userName"/＞＜/td＞
＜td＞用户名由字母开头，后跟字母、数字或下划线！＜/td＞ ＜/tr＞
＜tr＞ ＜td align="right"＞密码：*＜/td＞
＜td＞＜input type="password" name="userPwd"/＞＜/td＞
＜td＞设置登录密码，至少6位！＜/td＞ ＜/tr＞
＜tr＞ ＜td align="right"＞确认密码：*＜/td＞
＜td＞＜input type="password" name="userPwd1"/＞＜/td＞
＜td＞请再输入一次你的密码！＜/td＞ ＜/tr＞
＜tr＞ ＜td align="right"＞性别：*＜/td＞
＜td＞＜input type="radio" name="userSex" value="男" checked/＞男
＜input type="radio" name="userSex" value="女"/＞女＜/td＞
＜td＞请选择你的性别！＜/td＞ ＜/tr＞
＜tr＞ ＜td align="right"＞邮箱地址：*＜/td＞
＜td＞＜input type="text" name="userEmail" /＞＜/td＞
＜td＞请填写您的常用邮箱，可以用此邮箱找回密码！＜/td＞ ＜/tr＞
＜tr＞ ＜td align="right" valign="top"＞基本情况：*＜/td＞
＜td colspan="2"＞
＜textarea name="userBasicInfo" rows="5" cols="50"＞＜/textarea＞＜/td＞ ＜/tr＞
＜tr＞ ＜td colspan="3" align="center" height="40"＞
＜input type="checkbox" name="accept" value="yes"/＞
我已经仔细阅读并同意接受用户使用协议＜/td＞ ＜/tr＞
＜tr＞＜td colspan="3" align="center" height="40"＞
＜input type="submit" value="确认"/＞
＜input type="reset" value="取消"/＞＜/td＞ ＜/tr＞
＜/table＞
＜/form＞
＜/body＞
【运行测试】运行该页面，将出现如图2-1的界面。
这里只给出了一个简单的表单设计，对于其他有关标签的使用，请读者自己按标签格式应用练习。
2.1.2 CSS技术与应用案例
使用CSS可方便、灵活地设置网页中不同元素的外观属性，从而使网页在外观上达到一个更好的效果。使用CSS技术，需要首先定义样式表，然后使用该样式表。
1.CSS样式表的定义
CSS样式表的定义就是定义CSS选择器及CSS的有关属性、属性值，有3种基本定义方式。
（1）标记选择器——通过HTML标签定义样式表
基本语法格式如下。
引用样式的对象{标签属性：属性值；标签属性：属性值；标签属性：属性值；……}
（2）类别选择器——使用class定义样式表
若要为同一元素创建不同的样式或为不同元素创建相同的样式，可以使用CSS类选择器，CSS类有两种格式，定义时，在各自定义类的名称前面加一个点号。
格式1：标签名．类名{属性：属性值；属性：属性值；属性：属性值；……}
注意：这种格式的类指明所定义的样式只能用在类名前所指定的标签上。
格式2:．类名{属性：属性值；属性：属性值；属性：属性值；……}
注意：该格式的类使所有class属性值为该类名的标签都遵守该类所定义的样式。
（3）ID选择器——使用id定义样式表
在HTML页面中，ID选择符用来对某个单一元素定义单独的样式，定义ID选择符要在ID名称前加上一个#号。基本语法如下。
#id名称{属性：属性值 属性：属性值；属性：属性值；……}
注意：使用该类样式表时，需要将该样式的网页内容前加一个id="id名称"。
2．样式表的使用
在HTML中使用CSS的方法有3种：行内式、内嵌式和链接式。
1）行内式（不需要定义选择器）：利用style属性直接为元素设置样式，只对当前的标签起作用。如下面的代码所示。
＜p style="color:#FF0000; font-size:20px; text-decoration:underline; "＞正文内容1＜/p＞
＜p style="color:#000000; font-style:italic; "＞正文内容2＜/p＞
2）内嵌式：这种方式需要先定义有关的选择器，然后再使用。利用＜style＞＜/style＞标签对，将样式表（选择器）定义在＜head＞＜/head＞标签对之间，内嵌式样式表的作用范围是本HTML文档内。如下面的代码所示。
3）链接式：链接式样式表是将定义好的CSS单独放到一个以．css为扩展名的文件中，再使用＜link＞标签链接到所需要使用的网页中，在＜head＞与＜/head＞之间。
＜link＞标签链接到网页的格式：
＜link href="*.css文件路径" type="text/css" rel="stylesheet"＞
例如：首先定义一个sheet_x.css文档，其代码如下。
h2{ color:#0000FF; }
p{ color:#FF0000; text-decoration:underline; font-weight:bold; font-size:15px; }
其次，在HTML中使用。
3.CSS常用属性
从CSS选择器的定义可看出，CSS美化网页是通过设置网页元素的属性来实现的，主要有字体属性、颜色属性、背景属性和文本段落属性等。
（1）字体属性
字体属性主要有font-family、font-size及font等，具体含义与取值如表2-3所示。
表2-3 字体属性含义与取值
（2）颜色和背景属性
颜色和背景属性主要有color、background-color、background-image和background等，其具体含义与取值如表2-4所示。
表2-4 颜色和背景属性含义与取值
（3）文本段落属性
文本段落的属性包括字符间隔、文字修饰、纵向排列、文本转换、文本排列水平对齐方式、文本缩进和文本行高等。具体含义与取值如表2-5所示。
表2-5 文本段落的属性含义与取值
对于其他的有关属性，若需要可查看有关的书籍，这里不再详细介绍。
【例2-2】在【例2-1】已给出了一个页面（见图2-1），该页面没有修饰，不够美观，采用CSS修饰页面，重新设计页面，如图2-2所示。
图2-2 修饰后的注册页面
【分析】该问题需要两步：首先设计CSS文档，在该文档中包含所需要的格式控制，然后引用CSS中的样式，重新设计页面。
【实现】
（1）设计CSS样式表文档
对比图2-1和图2-2可知，在图2-2中，改变了页面所有字体的大小，页面最上面的“填写注册信息”也改变了颜色、字体等，每项输入域后面的提示信息也改变了，根据这些变化，编写CSS文档：ch02_2.css，该文档的代码如下。
#title{color:red; font-size:20px; font-weight:bod; }
#i{width:350px; height:15px; color:blue; font-size:12px; }
table{text-align:left; }
#t{text-align:right; }
（2）利用CSS对页面实现修饰
引用样式表ch02_2.css，对程序ch02_1.html进行修改，形成新代码文档ch02_2.html。
首先，通过链接式导入样式表，修改的这部分代码如下。
＜head＞ ＜link href="ch02_2.css" type="text/css" rel="stylesheet"＞ ＜/head＞
然后，修改页面的＜body＞＜/body＞之间的代码，其部分代码如下。
对于其他行，也采用这样的修改。
【运行测试】通过这样的修改，运行界面如图2-2所示，可以看出页面比较美观。
2.1.3 JavaScript技术与应用案例
JavaScript是一种简单的脚本语言，可以在浏览器中直接运行，是一种在浏览器端实现网页与客户交互的技术。JavaScript代码可以直接嵌套在HTML网页中，它响应一系列的事件，并执行事件处理函数，完成所需要的功能。
1.JavaScript的基本语法
JavaScript脚本语言的基本成分有数据类型、常量变量、运算符、表达式、控制语句和函数等。
1）数据类型：主要数据类型有int、float、string、boolean和null（空类型）。
2）变量：使用命令var声明变量，格式为：var变量名[=值];。
3）运算符：提供了算术运算符、关系运算符、逻辑运算符、字符串运算符、位操作运算符、赋值运算符和条件运算符等运算符。这些运算符与Java语言中支持的运算符及功能相同。
4）控制语句：控制语句有分支语句（if、switch）和循环语句（while、do-while、for），这些语句的语法规则和使用与Java语言中的要求一样。
5）函数：函数声明格式如下。
function functionName([parameter1, parameter2, …]){ //有关的处理语句；}
2.JavaScript的事件
在浏览器中，网页与客户的交互都是通过“事件”引发的，当一个事件发生时，执行相应的JavaSript脚本或指定的函数。
（1）JavaScript的事件
JavaScript的事件是指用户对网页的一些特定“操作”，表2-6给出了常用的事件、事件处理函数及何时触发事件处理函数。
表2-6 常用的事件和事件处理函数
（2）在HTML中引用（指定）事件处理函数（函数的调用）
在HTML中指定事件处理程序，需要在HTML标记中添加相应的事件处理程序的属性，并在其中指定作为属性值的代码或是函数名称。使用格式如下。
＜标签 各有关属性及其属性值on事件名称="函数名称(参数)"＞
【例2-3】通过input输入标签，引发单击事件，该事件的处理函数名是onClick()，要完成的功能是通过函数test()实现的，而函数test()的功能是显示一个提示窗口（由Windows的alert方法完成），并提示“事件引发一操作，并成功执行了这个操作！”。
这里采用在页面中直接嵌入JavaScript代码的实现方式，其主要代码如下：
＜head＞
＜script language="javascript"＞
function test(){ window.alert("事件引发一操作，并成功执行了这个操作！"); }
＜/script＞
＜/head＞
＜body＞
＜form action=""＞
＜input type="button" value="警告对话框" onclick="test()"＞＜br/＞
＜/form＞
＜/body＞
该程序的运行界面如图2-3和图2-4所示，当浏览器运行程序ch02_3.html时，首先显示如图2-3所示的页面，但单击“警告对话框”按钮时，出现如图2-4所示的提示对话框，单击“确定”按钮，该提示对话框消失。
图2-3 【例2-3】运行界面
图2-4 提示对话框
3.JavaScript的对象
JavaScript中设有浏览器的文档对象：window、navigator、screen、history、location和document，利用这些对象，可以实现对网页信息的操作和处理加工。
（1）window对象
HTML文档内容在window对象中显示，同时，window对象提供了用于控制浏览器窗口的方法。window对象属性的常用方法如表2-7所示。
表2-7 window对象的常用方法
（2）location对象
location对象实现网页页面的跳转。在JavaScript中，利用location对象实现页面的自动跳转。使用格式如下。
window.location.href="网页路径";
（3）document对象
每个HTML文档被加载后都会在内存中创建一个document对象，该对象存放整个网页HTML内容，从中可获取页面表单的各种信息，并对这些信息进行操作加工处理。
假设有如下的表单。
获取表单输入域t1对象，代码如下。
var fObj=document.form1.t1; //form1为表单的名称，t1为某表单域的name值
获取表单域的值。其中，fObj是表单域对象名，代码如下。
var v=fObj.value;
【例2-4】在【例2-2】中，已经设计了一个注册页面，在本例中，根据图2-2（见【例2-2】）页面所给出的不同信息的输入要求，利用JavaScript进行表单数据有效性验证，当不符合要求时，通过警告框给出提示，并重新输入。
【分析】输入表单的验证就是对表单中输入的数据进行检验，如果表单中输入的数据不符合要求，则禁止提交，并给用户适当的提示信息，以便用户重新输入。只有当所有输入的数据都符合要求后，才允许提交，并进入表单标签的action属性所指定的处理程序，即：＜form action="提交后，进入的处理页面"＞。
（1）由图2-2可知，该注册页面需要验证的表单输入域和要求
● 用户名：用户名是否为空，是否符合规定的格式（用户名由字母开头，后跟字母、数字或下划线！）。
● 密码：密码长度是否超过6位，两次密码输入是否一致。
● 邮箱地址：邮箱地址必须符合邮箱格式。
（2）必须注意提交表单并实现输入验证的方式
一般使用“button类型”按钮提交，“提交”时先执行“响应函数”。提交方式如下。
＜input type="button" value="提交" onClick="响应函数"＞
另外，在验证函数中，当都满足格式后，采用如下格式实现提交。
document.forms[0].submit(); //forms[0]是指提交页面中的第1个表单
【实现】所谓验证输入，就是编写有关的Javascript函数，去验证表单中各输入域是否符合规定，若不符合规定，给出提示信息。为此，使用JavaScript编写验证函数，并形成文件：ch02_4.js，其代码如下。
function validate(){
var name=document.forms[0].userName.value; //获取表单中userName输入域的值
var pwd=document.forms[0].userPwd.value; //获取表单中userPwd输入域的值
var pwd1=document.forms[0].userPwd1.value; //获取表单中userPwd1输入域的值
var email=document.forms[0].userEmail.value; //获取表单中userEmail输入域的值
var accept=document.forms[0].accept.checked; //获取表单中accept是否选中的值
var regl=/ [a-zA-Z]\w*$ /;
var reg2= / \w+([-+.＇]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*$ /;
if(name.length＜=0) alert("用户名不能为空！");
else if(! regl.test(name)) alert("用户名格式不正确！");
else if(pwd.length＜6) alert("密码长度必须大于等于6位！");
else if(pwd! =pwd1) alert("两次密码不一致！");
else if(! reg2.test(email)) alert("邮件格式不正确！");
else if(accept= =false) alert("您需要仔细阅读并同意接受用户使用协议！");
else document.forms[0].submit();
}
然后，修改页面ch02_2.html，在标签＜head＞＜/head＞中添加一行，导入js文件。
＜script language="javascript" src=" ch02_4.js"＞＜/script＞
最后，再将页面的提交按钮输入域修改如下。
＜input type="Button" value="确认" onClick="validate()"/＞;
【运行测试】重新运行该页面，当输入项不符合要求时，就给出提示警告。
2.1.4 JSP技术与应用案例
JSP是一种动态网页技术标准，它是在静态网页HTML代码中加入Java程序片段（Scriptlet）和JSP标签（tag），构成JSP网页文件，其扩展名为．jsp。
1.JSP语法
JSP页面是将JSP代码放在＜%与%＞标签中，然后嵌入到HTML代码中而形成的。在＜%与%＞标签中定义JSP元素的行为。
（1）JSP变量和方法的声明
在JSP页面中可以声明变量和方法，声明后的变量和方法可以在本JSP页面的任何位置使用，并在JSP页面初始化时被初始化。
语法格式：＜%! 声明变量、方法和类 %＞
（2）显示JSP表达式的值
JSP的表达式是由变量和常量组成的算式，它将JSP生成的数值转换成字符串嵌入HTML页面，并直接输出（显示）其值。
语法格式：＜%=表达式%＞
（3）JSP代码段
JSP代码段可以包含任意合法的Java语句，该代码段在服务器处理请求时被执行。
语法格式：＜% 符合java语法的代码块 %＞
（4）JSP注释
在JSP程序中，为了增加JSP程序的可读性，给出了注释元素。
语法格式1:＜%-- 要添加的文本注释 --%＞
语法格式2:＜! --要添加的文本注释--＞
语法格式3:＜%//要添加的文本注释%＞或＜%/*要添加的文本注释*/%＞
2.JSP指令元素
JSP指令标记在客户端是不可见的，它是被服务器解释并被执行的。
JSP指令的语法格式如下。
＜%@ 指令名称 属性1="属性值1" 属性2="属性值2"… 属性n="属性值n"%＞
（1）page指令
page指令用来定义JSP页面中的全局属性，它描述了与页面相关的一些信息，其作用域为它所在的JSP文件页面及其包含的文件。其属性如表2-8所示。
表2-8 page指令的主要属性
（2）include指令
include指令称为文件加载指令，可以将其他的文件插入JSP网页，被插入的文件必须保证插入后形成的新文件符合JSP页面的语法规则，include指令语法格式如下。
＜%@ include file="filename"%＞
其中：include指令只有一个file属性，filename是指被包含的文件的名称（相对路径），被插入的文件必须与当前JSP页面在同一Web服务目录下。
3.JSP动作元素
JSP动作元素是用来控制JSP引擎的行为，JSP标准动作元素均以jsp为前缀，最常使用的有两个。
● ＜jsp:include＞：在页面得到请求时动态包含一个文件。
● ＜jsp:forward＞：引导请求进入新的页面（转向到新页面）。
（1）＜jsp:include＞动作，语法格式如下。
＜jsp:include page="文件的名称"/＞
功能：当前JSP页面动态包含一个文件，即将当前JSP页面和被包含的文件各自独立编译为字节码文件。当执行到该动作标签处，才加载执行被包含文件的字节码。
提示：include动作与include指令所实现的两种包含，程序的执行性质是完全不同的，一个是静态包含，一个是动态包含，对于静态包含不能传递参数，但对于动态包含可以在两个文件之间传递参数。
（2）＜jsp:forward＞
动作＜jsp:forward＞用于停止当前页面的执行，转向另一个页面，语法格式如下。
＜jsp:forward page="文件的名称"/＞
4.JSP内置对象
在JSP中为了便于数据信息的保存、传递和获取等操作，专门设置了9个内置对象，如表2-9所示。JSP内置对象是指它们是预先设定的，无需创建，每个对象都有自己的属性和方法，在编写JSP代码时可以直接使用。
表2-9 JSP内置对象
（1）request对象的常用方法
request对象的各种方法主要用来处理客户端浏览器提交的请求信息，以便做出相应的处理。主要的方法如表2-10所示，在后面几节中会给出这些方法的使用案例。
表2-10 request对象的主要方法
（2）response对象的常用方法
response对象提供了页面重定向（sendRedirect）方法、设置状态行（setStatus）方法和设置文本类型（setContentType）方法等。主要方法如表2-11所示。
表2-11 response对象的常用方法
（3）session对象的主要方法
session对象的主要作用是存储并获取用户会话信息。其主要方法如表2-12所示。
表2-12 session对象主要方法
【例2-5】设计一个网上答题及其自动评测系统。本案例设计一个简单的网上答题与评测系统，其运行界面如图2-5所示。该程序包括两部分，首先是试题页面的设计及解答的提交，其次是当提交解答后，系统自动评阅并给出评阅结果。图2-5a是试题页面，图2-5b是评阅后给出的解答页面。
图2-5 【例2-5】的运行界面
a) 试题页面b) 评阅后给出的解答页面
【分析】该案例的设计需要设计两个JSP页面：一个是提交信息页面，另一个是获取提交信息并进行处理显示结果页面。其设计关键有以下两点。
1）对于互斥的单选框、只允许单选的列表框，只传递一个参数。
2）对于复选框、可多选列表框，需传递多个参数，通过数组保存并获取参数值。
【代码编写】
1）提交信息页面程序：ch02_5_input.jsp，其主要代码如下。
＜body＞
＜form action="ch02_5_show.jsp" method="post"＞
一、 2+3=? ＜br＞
＜input type="radio" name="r1" value="2" checked="checked"＞2
＜input type="radio" name="r1" value="3"＞3
＜input type="radio" name="r1" value="4"＞4
＜input type="radio" name="r1" value="5"＞5＜br＞
二、下列哪些是偶数？＜br＞
＜input type="checkbox" name="c1" value="2"＞2
＜input type="checkbox" name="c1" value="3"＞3
＜input type="checkbox" name="c1" value="4"＞4
＜input type="checkbox" name="c1" value="5"＞5＜br＞
三、下列哪些是动态网页？＜br＞
＜select size="4" name="list1" multiple="multiple"＞
＜option value="asp"＞ASP＜/option＞
＜option value="php"＞PHP＜/option＞
＜option value="htm"＞HTML＜/option＞
＜option value="jsp"＞JSP＜/option＞
＜option value="xyz" selected="selected"＞xyz＜/option＞
＜/select＞＜br＞
四、下列组件哪个是服务器端的？＜br＞
＜select size="1" name="list5"＞
＜option value="jsp"＞JSP＜/option＞
＜option value="servlet"＞SERVLET＜/option＞
＜option value="java"＞JAVA＜/option＞
＜option value="jdbc"＞JDBC＜/option＞
＜/select＞＜br＞
五、在服务器端用来接受用户请求的对象是：
＜input type="text" size="20" name="text1"＞＜br＞
＜div align="left"＞
＜input type="submit" value="提交" name="button1"＞
＜input type="reset" value="重置" name="button2"＞
＜/div＞
＜/form＞
＜/body＞
2）获取提交信息并进行处理页面：ch02_5_show.jsp，其主要代码如下。
＜body＞
＜% String s1 = request.getParameter("r1");
if (s1 ! = null) {
out.println("一、解答为：2+3="+s1+" ");
if (s1.equals("5")) out.println("正确！" + "＜br＞");
else out.println("错误！" + "＜br＞");
} else out.println("一、没有解答！");
out.println("---------------------------＜br＞");
String[] s21 = request.getParameterValues("c1");
if (s21 ! = null) {
out.println("二、解答为：偶数有：");
for(int i=0; i＜s21.length; ++i){out.println(s21[i]+" "); }
if (s21.length = = 2 && s21[0].equals("2") && s21[1].equals("4"))
{ out.println("正确！" + "＜br＞"); }else{out.println("错误！" + "＜br＞"); }
} else{out.println("二、没有解答！"); }
out.println("---------------------------＜br＞");
String[] s31 = request.getParameterValues("list1");
if (s31 ! = null) {
out.println("三、解答为：动态网页有：");
for(int i=0; i＜s31.length; ++i){out.println(s31[i]+" "); }
if (s31.length = = 3 && s31[0].equals("asp") && s31[1].equals("php")
&& s31[2].equals("jsp"))
{out.println("正确！" + "＜br＞"); }else{out.println("错误！" + "＜br＞"); }
} else out.println("三、没有解答！");
out.println("---------------------------＜br＞");
String s4 = request.getParameter("list5");
if (s4 ! = null) {
out.println("四、解答为：服务器端的组件是有："); out.println(s4+" ");
if(s4! =null&&s4.equals("servlet")) out.println("正确！"+"＜br＞");
else out.println("错误！"+"＜br＞");
}else ut.println("四、没有解答！");
out.println("---------------------------＜br＞");
String s5 = request.getParameter("text1");
if (s5 ! = null) {
out.println("五、解答为："); out.println(s5+" ");
if (s5 ! = null && s5.equals("request")) out.println("正确！" + "＜br＞");
else out.println("错误！" + "＜br＞");
} else out.println("五、没有解答！");
out.println("---------------------------＜br＞");
%＞
＜/body＞
【运行测试】运行页面程序ch02_5_input.jsp，当提交后，给出结果显示。
思考：基于该题目的设计思想，设计5套真实网上考试试题，并都给出评测及其评判结果。
2.1.5 EL表达式与应用案例
在Web程序设计中，利用EL表达式，可以直接计算并显示表达式的值，简化了JSP网页的设计。
1.EL的语法形式
所有的EL都是以“${”开始，以“}”结尾的，语法格式如下。
${expression}
功能：在页面上显示表达式expression的值。
2．存取运算符
在EL中，对数据值的存取是通过“[]”或“.”实现的。其格式如下。
${name.property} 或 ${name["property"]} 或 ${name[property]}
说明：
1）“[]”主要用来访问数组、列表或其他集合对象的属性。
2）“.”主要用于访问对象的属性。
3.EL运算符
EL支持的运算符和Java语言运算符类似，主要有算术运算符、关系运算符和逻辑运算符等，如表2-13所示。
表2-13 EL中的运算符
4.EL内部对象
EL提供了11个可直接使用的内部对象，如表2-14所示。
表2-14 EL内部对象
【例2-6】设计两个JSP页面，实现如图2-6所示的显示结果。其中，form.jsp是提交信息的页面，在doSubmit.jsp页面中通过param和paramValues对象获取form.jsp页面提交的信息并显示。
图2-6 【例2-6】显示结果
a) 提交信息页面b) 显示提交信息页面
1）提交信息页面：form.jsp，其主要代码如下。
＜body＞
＜form action="doSubmit.jsp" method="post"＞
姓名 ＜input type="text"name="name"＞＜br/＞
性别 ＜input type="text"name="sex"＞＜br/＞
语言 ＜input type="text"name="lang"＞＜br/＞
电话 ＜input type="text"name="regTelephone"＞＜br/＞
邮件 ＜input type="text"name="email"＞＜br/＞
简介＜textarea rows="2" cols="30" name="intro"＞＜/textarea＞＜br/＞＜br＞
爱好：音乐＜input type="checkbox" name="aihao" value="音乐"/＞
篮球＜input type="checkbox" name="aihao" value="篮球"/＞
足球＜input type="checkbox" name="aihao" value="足球"/＞＜br/＞＜br＞
＜input type="submit" value="提交"/＞ ＜input type="reset" value="重置"/＞
＜/form＞
＜/body＞
2）获取表单信息并显示信息页面：doSubmit.jsp，其主要代码如下。
＜body＞
＜h2＞您提交的内容如下：＜/h2＞
＜% request.setCharacterEncoding("utf-8"); %＞
姓名：${param.name}＜br/＞ 性别：${param.sex}＜br/＞
外语：${param.lang}＜br/＞ 电话：${param.regTelephone}＜br/＞
email:${param.email}＜br/＞ 个人简介：${param.intro}＜br/＞
爱好：${paramValues.aihao[0]} ${paramValues.aihao[1]} ${paramValues.aihao[2]}
＜/body＞
3）运行form.jsp，按照图2-6a中所示输入数据并提交，显示如图2-6b所示的结果。