2.1HTML表单提交数据和JSP获得数据
作者：老麻雀 2006/9/13 14:30:16
HTML表单提交数据和JSP获得数据
为了学习掌握JSP动态网页的设计开发，我们先从大家比较熟悉的表单入手。以前在学习静态网页设计时，做好的表单无法提交数据，那是因为没有接收数据的程序。本节使用一组范例，由HTML的表单提交数据，并使用JSP动态网页获得数据，来说明他们之间的关系和工作原理。
一、 范例的演示和代码清单
演示的前提：
1. 配置好开发运行环境；
2. 将范例ch2，复制到resin2.1.6\doc文件夹内；
3. 启动JSP引擎；
演示步骤：
1. 启动IE，在地址栏键入http://127.0.0.1:8080/ch2/ch2-1.htm，如图2-1所示：
图 2-1
2. 在表单的姓名栏键入“张三”，年龄栏键入“21”，性别选择其中的一项，密码栏键入“123”，然后点击“提交”按钮。屏幕出现2-2所示界面：
图 2-2
注意：访问动态网页必须在启动JSP引擎后，在IE的地址栏键入IP地址和路径文件名，才能进行访问，不能使用直接双击打开的方式。
网页的页面上显示了所提交数据的全部内容。请注意，地址栏上的内容是：http://127.0.0.1:8080/ch2/ch2-1.jsp。这说明提交的数据已被ch2-1.jsp动态网页接收，并将其送到屏幕上进行显示。
当然，可以在表单中填写其他的内容，屏幕显示的内容会随之变化。但是如果在“年龄”项目中填写的不是数字，而是字母、汉字等不正确的内容，屏幕上也会将这些错误内容显示出来，甚至任何一项都不填写，直接点击“提交”按钮，动态网页仍能正常运行。这些问题，我们会在以后的章节中去一一解决。目前先要弄清HTML静态网页和JSP动态网页之间的关系。
两个网页的代码如下：
◇－◇－◇－◇－◇－◇－◇－◇－◇－◇ 表单 ◇－◇－◇－◇－◇－◇－◇－◇－◇－◇
范例ch2-1.htm
1) <html>
2) <head>
3) <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4) <title>表单</title>
5) </head>
6)
7) <body bgcolor="#FFFFCC">
8) <h2 align="center"><font color="#000099">使用表单提交数据</font></h2>
9) <form name="form1" method="post" action="ch2-1.jsp">
10) <p> </p>
11) <p>姓名：
12) <input name="xingming" type="text" id="xingming">
13) </p>
14) <p>性别：
15) <input name="xingbie" type="radio" value="男" checked>
16) 男
17) <input type="radio" name="xingbie" value="女">
18) 女 </p>
19) <p>年龄：
20) <input name="nianling" type="text" id="nianling">
21) </p>
22) <p>密码：
23) <input name="mima" type="password" id="mima">
24) </p>
25) <p> </p>
26) <table width="40%" border="0">
27) <tr>
28) <td><div align="center">
29) <input type="submit" name="Submit3" value="提交">
30) </div></td>
31) <td><input type="reset" name="Submit2" value="重写"></td>
32) </tr>
33) </table>
34) <p> </p>
35) </form>
36) <p><em><font color="#000099"></font></em></p>
37) </body>
38) </html>
◇－◇－◇－◇－◇－◇－◇－◇－◇－◇ 接收表单数据 ◇－◇－◇－◇－◇－◇－◇－◇－◇－◇
范例ch2-1.jsp
1) <%@page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
2) <html>
3) <head>
4) <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5) <title>接收表单数据</title>
6) </head>
7) <body bgcolor="#FFFFCC">
8) <h2>动态网页接收的数据</h2>
9) <p>
10) <% ! //定义接收HTML数据的变量
11) String name;
12) String xingbie;
13) String nianling;
14) String password;
15) %>
16) <% //接收HTML数据
17) name=request.getParameter("xingming");
18) xingbie=request.getParameter("xingbie");
19) nianling=request.getParameter("nianling");
20) password=request.getParameter("mima");
21) //将数据送到屏幕上显示
22) out.print(“姓名：”+name);
23) out.print(“<p>性别：”+xingbie);
24) out.print(“<p>年龄：”+nianling);
25) out.print(“<p>密码：”+password);
26) %>
27) </p>
28) <p> <a href=”ch2-1.htm”>返回表单</a></p>
29) </body>
30) </html>
二、HTML表单的构成分析
HTML的表单网页，给人最直观的印象就是页面上的各种表单项，比如文本框、密码框、单选按钮、复选项、下拉列表菜单、提交按钮等。实际上，和JSP动态网页发生联系，还有表单（域）的概念。
1. 表单项
要分析HTML表单中的元素及其作用，首先启动Dreamweaver，在图形设计界面即可看到图2-3所示界面：
图 2-3
图2-3中有七个表单项，分别是对应“姓名”的文本域，对应“性别”的两个单选按钮，对应“年龄”的文本域，对应“密码”的文本域，以及“提交”、“重写”两个按钮。此时可以把每个表单项看成一个用来存放用户提交数据的容器。每个表单项都有一系列的属性，这些属性起决定其外观及功能的作用。
图2-3中已选中“姓名”后面的文本框，在属性面板中“文本域”的表单项名称是“xingming”(姓名的汉语拼音)，“类型”是“单行”，其他项目为空。其中“字符宽度”影响文本框的宽窄，“最多字符数”限定文本框能够输入的最多字符数。
如果再选中“性别”后面的第一个单选按钮，在属性面板中“单选按钮”的表单项名是“xingbie”,“选定值”为“男”，“初始状态”为“已勾选”。第二个单选按钮，在属性面板中“单选按钮”的表单项名是“xingbie”,“选定值”为“女”，“初始状态”为“未选中”。注意：自己编制含有“单选按钮”的表单项，一定要将其中的一个“初始状态”设为“已勾选”，否则JSP程序不能正常运行。对于有时需要所有“单选按钮” 必须设为“未选中”，解决的方法将在后面讲解。
“年龄”后面的文本框，在属性面板中“文本域”的表单项名是“nianling”，“类型”是“单行”，其他项目的值为空。
“密码”后面的文本框，在属性面板中“文本域”的表单项名是“mima”，“类型”是“密码”，其他项目的值为空。
以上各个表单项的属性值，在与动态网页发生联系时，都起着重要作用。为了更清楚的了解这些属性值，我们看一下ch2-1.htm文件的部分代码行，
11) <p>姓名：
12) <input name=”xingming” type=”text” id=”xingming”>
13) </p>
14) <p>性别：
15) <input name=”xingbie” type=”radio” value=”男” checked>
16) 男
17) <input type=”radio” name=”xingbie” value=”女”>
18) 女 </p>
第12行中type=”text”的含义：这个表单项的类型是文本域（也称为文本框）。
name =”xingming”的含义：“文本域”的表单项名是“xingming”。
第15行中type=”radio”的含义：这个表单项的类型是单选按钮。
name=”xingbie”的含义：“单选按钮”的表单项名是“xingbie”。
Value=”男”的含义：这个单选按钮的值是“男”。
Checked的含义：这个单选按钮已勾选。
第17行中name=”xingbie”的含义：“单选按钮”的表单项名是“xingbie”。
Value=”女”的含义：这个单选按钮的值是“女”。
我们注意到15行和17行两个“单选按钮”的表单项名都是“xingbie”，这说明他们是属于同一组的单选按钮。在同一组的单选按钮中，只能有一个“值”被选中。
还有“提交”、“重写”两个按钮，他们有和动态网页更紧密的联系，我们在下面结合表单域做详细地说明。
2. 表单（域）
表单中的七个表单项，在同一个表单（域）中。在Dreamweaver的图形设计界面中，可以看到一个红色虚线框，该虚线框就是表单的领域范围。所以我们往往将一个表单又称作为一个表单域。和表单域相关的代码行如下：
9) <form name=”form1” method=”post” action=”ch2-1.jsp”>
……
29) <input type=”submit” name=”Submit3” value=”提交”>
31) <td><input type=”reset” name=”Submit2” value=”重写”></td>
……
35) </form>
第9行中<form ……>是表单域开始的标记。
name =”form1”的含义：把整个表单看成一个大容器，容器名是”form1”
method=”post”的含义：表单提交数据时，传递方式为整批发送。
action=”ch2-1.jsp”的含义：表单提交的数据，由ch2-1.jsp接收。
第29行中type=”submit”的含义：按钮的作用是将所在表单域内的数据送出去。
第31行中type=”reset”的含义：按钮的作用是将所在表单域内的数据清空。
第35行中的 </form> 是表单域结束的标记。
综上所述，一个规范完整的表单HTML文档，应该具备如下条件：
> 有表单的开始标记和结束标记，限定表单域的范围；
> 在表单开始标记的参数中，必须含有提交数据传送的方式和接收数据的程序（动态网页）文件名；
> 在表单域范围内，放置表单项，每个表单项要定义需要的属性；
> 在表单域范围内，要有“提交”按钮；
因此，在Dreamweaver的图形设计界面下，完成表单的制作后，必须进入文本方式的代码界面，将表单开始标记参数中的action=“”填入相应JSP文件名。
三、JSP动态网页构成分析
初次接触JSP动态网页，还需了解一下JSP网页的基本知识，尤其是与本范例有关的知识，然后学习其构成及如何获得HTML提交的数据。JSP动态网页所涉及到的其他一些概念和知识，将在后面的范例中进行介绍。现在需要了解的JSP网页基本知识如下：
1. JSP动态网页主要解决某些功能的实现，并了解程序代码及其主要成分；
2. JSP动态网页是在HTML超文本语言中镶嵌java代码构成的；
3. 嵌入的java代码，放在 <% %> 标记中，要符合java的语法；
4. JSP动态网页的文件扩展名是 .jsp；
5. 纯粹解决某些功能的JSP动态网页，可以不包括任何HTML代码。
我们看一下ch2-1.jsp动态网页的程序代码。
第1行：<%@page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" %> 是JSP动态网页的页命令，他对动态网页整体性能的控制起着重要作用，这些命令后面要专门讲解。现在只需知道，动态网页中不能缺少这一行。
第2行－第9行：是纯粹的HTML代码。学习过HTML超文本语言的一看就懂。
第10行－第15行：是放在 <% ! %> 标记中的java代码，定义了四个字符串型的变量。因为在HTML表单中有四个承载数据的表单项，定义这些变量是为下面接收获得数据进行准备。
第16行－第21行：也是放在 <% %> 标记中的java代码，他的作用是获得HTML表单提交的数据。等号作用是赋值，等号左边是已经定义好的JSP变量，等号右边是从HTML表单获得的数据。request.getParameter( )是JSP默认对象中的一个方法，获得HTML表单提交的数据，必须使用这个方法。
17) name=request.getParameter("xingming"); JSP变量name获得HTML表单中xingming表单项中的数据。
18) xingbie=request.getParameter("xingbie"); JSP变量xingbie获得HTML表单中xingbie表单项中的数据。
19) nianling=request.getParameter("nianling"); JSP变量nianling获得HTML表单中nianling表单项中的数据。
20) password=request.getParameter("mima"); JSP变量password获得HTML表单中mima表单项中的数据。
在这里我们看到JSP动态网页和HTML静态网页发生的联系，这条语句等号左边必须是已经定义好的JSP变量，右边request.getParameter( )方法的括号（ ）中必须是HTML表单中的表单项名。
同时也会发现每个表单项名加上了（“ ”），语句的结尾使用了分号（；），这都是java语法所要求的。
特别注意：
a. JAVA语言对于字母的大、小写区分非常敏感，一点也不能错，否则就是错误语句。
b. 语句行中所有的符号 等号＝、括号（）、引号 “ ”、分号；都必须是半角英文的符号，如果使用了中文全角的符号，程序行就成为非法语句。
在今后的编程中，这些都是经常容易出错的地方。
第22—25行：是将获得的数据送到屏幕上显示，这是JSP最常用的输出语句。
22) out.print(“姓名：”+name);
23) out.print(“<p>性别：”+xingbie);
24) out.print(“<p>年龄：”+nianling);
25) out.print(“<p>密码：”+password);
第22行中out.print( ) 是JSP默认类的一个方法，（）中是输出的内容；
“姓名：” 是输出的字符串；+ 是字符串和变量的连接符；
name 、xingbie、 nianling、 password都是JSP变量，已在17、18、19、20行获得HTML提交的数据。
第23行中的 <P>，是在JSP输出语句中插入的HTML标记，其作用和在HTML文档中一样，即插入一个分段标记。
综上所述，该JSP文档基本由三部分组成，第一部分10-15行定义变量，为获得数据做准备；第二部分16-21行使用request.getParameter( )方法，获得HTML表单提交的数据；第三部分22-25行将获得的数据送到屏幕上显示。
JSP动态网页将获得的数据，送到屏幕显示，是最简单的数据处理。后面的范例中，我们将学习复杂的数据处理，比如数据的转换、算术运算、逻辑运算，以及如何使用分支语句、循环语句控制程序的流程等。
| 我也说两句 |
| 发表须知： 一、用户须严格遵守国家法律和政策，包括但不限于《全国人大常委会关于维护互联网安全的决定》、《信息网络传播权保护条例》等规定，审慎、合法地利用伊妃（E-file）平台发表言论、作品。 二、用户的言论、行为若涉嫌违法或侵权，用户可能被强制承担因该行为直接或间接导致的全部法律责任。依照法律法规规定，伊妃（E-file）运营方有义务提供用户资料，有义务和权利采取删除、屏蔽、断开链接等各种必要措施。 三、伊妃（E-file）中心授权网络法律专业研究服务机构“网络法苑”为用户及客户提供包括免费咨询在内的全方位的法律支持。 |
阿酷科技 Arkoo.com 提供底层技术