<arkoo:title>__麻雀苑</arkoo:title>

2.7简易网上在线调查代码及说明

作者：老麻雀 2006/9/13 14:58:18

网上在线调查
　　这是一个网上在线调查的小东西，他从另一个角度让我们体验动态网页的功能作用。
一、范例的演示和代码清单
　　演示步骤：
1. 启动JSP引擎后，启动IE，在地址栏键入http://127.0.0.1:8080/ch2/ch2-32.htm，如图2-21所示：

　　图 2-21

　　图 2-22

2. 使用下拉列表选择其中的一项后单击“提交”。出现图2-22中类似画面。在这个画面中点击“返回”，再选择下拉列表中一项提交，如此循环几次。
　　我们看到在这组网页中，将用户选择提交的情况用形象的光带显示处理，并且在光带显示区上面告知用户“你是第X位参与者”。这也都是JSP动态网页实现的。下面是这两个网页的代码行：
◇－◇－◇－◇－◇－◇－◇－◇－◇－◇ 问卷统计 ◇－◇－◇－◇－◇－◇－◇－◇－◇
范例ch2-32.htm
1) <html>
2) <head>
3) <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4) <title>问卷统计</title>
5) <style type="text/css">
6) 
7) </style></head>
8) <body bgcolor="#FFFFCC">
9) <form name="form1" method="post" action="ch2-32.jsp">
10)   <p>运动项目问卷调查</p>
11)   <p>请选择您最喜欢的运动：</p>
12)   <p>（1）长跑</p>
13)   <p>（2）游泳</p>
14)   <p>（3）足球</p>
15)   <p>（4）篮球 </p>
16)   <p>请输入：
17)     <select name="select">
18)       <option value="1">长跑</option>
19)       <option value="2">游泳</option>
20)       <option value="3">足球</option>
21)       <option value="4">篮球</option>
22)     </select>
23) </p>
24)   <p>
25)     <input type="submit" name="Submit" value="提交">
26)     <input type="reset" name="Submit" value="重置">
27) </p>
28) </form>
29) </body>
30) </html>
　　
◇－◇－◇－◇－◇－◇－◇－◇－◇－◇ 问卷统计 ◇－◇－◇－◇－◇－◇－◇－◇－◇
范例ch2-32.jsp
1) <%@ page contentType="text/html; charset=gb2312" language="java" import="java.util.*" %>
2) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
3) <html>
4) <head>
5) <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6) <title>问卷统计</title>
7) <style type="text/css">
8) 
9) </style></head>
10) <body bgcolor="#FFFFCC">
11) <p>
12)   <%!
13)   int nu=0;
14)   int i[]=｛0,0,0,0｝;
15)   int select;
16)   %>
17)   <%
18)   nu++;
19)   String h[]=｛"长跑","游泳","足球","篮球"｝;
20) select=Integer.parseInt(request.getParameter("select"));
21) out.print("<h2 align=center>问卷调查情况如下</h2><p><hr noshade size=3><p><h4 align=center>您是第<font color=#FF0000>"+nu+"</font>位参与者</h4><p><hr noshade size=5><p>");
22) switch(select)
23)   ｛
24)    case 1: out.print("你选择了长跑！目前参与调查的人数图示如下<p>");
25)      i[0]++;
26)      break;
27)    case 2: out.print("你选择了游泳！目前参与调查的人数图示如下<p>");
28)      i[1]++;
29)      break;
30)    case 3: out.print("你选择了足球！目前参与调查的人数图示如下<p>");
31)      i[2]++;
32)      break;
33)    case 4: out.print("你选择了篮球！目前参与调查的人数图示如下<p>");
34)      i[3]++;
35)      break;
36)    default:
37)      out.print("输入错误！<p>");
38)      out.print("<a href=jsp1.htm>返回</a>");
39)      return;
40)   ｝
41) for(int k=0;k<=3;k++)
42)   ｛
43)    out.print(h[k]+":");
44)    out.print("<img src = img/bar.jpg width = "+i[k]*10 + " height = 10> ");
45)    out.print(i[k]+"人 <p>");
46)   ｝
47) %>
48) </p>
49) <p><a href="ch2-32.htm">返回</a></p>
50) </body>
51) </html>
　　
二、HTML表单的分析
　　这个HTML网页中的表单只有一个“下拉列表”和一个“提交”按钮。应注意在下拉列表属性的列表值中，项目标签分别是长跑、游泳、足球、篮球，而他们对应的值分别是 1、2、3、4 ，这和“简易计算器”使用了相同的方法。
三、JSP动态网页的分析
　　这个JSP动态网页实现了两个功能，一个是“计数器”。另一个是分别统计四项的投票人数，并将数值转换成光带显示出来。我们先分析“计数器”实现的方法，然后在分析人数分别统计光带显示功能实现的方法。
　　和“计数器”有关的代码行：
13)   int nu=0;
18)   nu++;
21) out.print("<h2 align=center>问卷调查情况如下</h2><p><hr noshade size=3><p><h4 align=center>您是第<font color=#FF0000>"+nu+"</font>位参与者</h4><p><hr noshade size=5><p>");
　　第13行定义整型变量nu，且初始值为0，注意他是在<%!   %>卷标中被定义的。
　　第18行变量nu自身加1，这样每运行一次nu就加一次，也就形成了计数器。
　　第21行将变量nu的值用红色显示出来。
　　注意定义变量要在<%! %>卷标中，而变量自身加一运算要在另一个<% %>卷标中。这样才能实现程序每运行一次，变量的值加1，而不是被重新定义。其实上述三行代码，可以单独形成一个JSP“计数器”网页，只不过该计数器，只要一刷新网页计数器就自动加1，显得不太完善。
　　人数分别统计的代码行：
14)   int i[]=｛0,0,0,0｝;

20) select=Integer.parseInt(request.getParameter("select"));
21)
22) switch(select)
23)   ｛
24)    case 1: out.print("你选择了长跑！目前参与调查的人数图示如下<p>");
25)      i[0]++;
26)      break;
27)    case 2: out.print("你选择了游泳！目前参与调查的人数图示如下<p>");
28)      i[1]++;
29)      break;
30)    case 3: out.print("你选择了足球！目前参与调查的人数图示如下<p>");
31)      i[2]++;
32)      break;
33)    case 4: out.print("你选择了篮球！目前参与调查的人数图示如下<p>");
34)      i[3]++;
35)      break;
36)    default:
37)      out.print("输入错误！<p>");
38)      out.print("<a href=jsp1.htm>返回</a>");
39)      return;
40)   ｝
　　人数分别统计，实际上是“计数器”代码的扩充。
　　第14行定义了一个一维数组，用于承载四个项目的人数值。
　　第20行是将HTML表单提交的选择值（字符串型）转换成整型，并赋值给JSP的变量select，这一行是复合语句，他将获得数据和转换数据的类型合在一条语句行中实现。
　　第22行－40行是一个switch多分支开关语句：
　　其中第22行中，变量select是switch语句的开关值，
　　select=1时运行24行－26行，
　　select=2时运行27行－29行，
　　select=3时运行30行－32行，
　　select=4时运行33行－35行。
　　当用户选择了不同项目，第20行语句就获得不同数据，变量select的值就分别是1、2、3、4，其在22－40行中又控制着运行不同的语句行，即实现了不同的下标变量加1，每个项目被选择的人数也就被统计出来了。
　　光带显示的代码行：
41) for(int k=0;k<=3;k++)
42)   ｛
43)    out.print(h[k]+":");
44)    out.print("<img src = img/bar.jpg width = "+i[k]*10 + " height = 10> ");
45)    out.print(i[k]+"人 <p>");
46)   ｝
　　这是一个for循环语句，每循环一次显示输出一个项目统计结果。循环体中：
　　第43行显示输出项目的名称，h[k]数组是在第19行定义的。
　　第44行是将人数转换成光带的长度，其中img/bar.jpg是一个红色矩形图片，他的长度由width = i[k]*10来控制，其中的i[k]就是上面所说含有每个项目被选择的人数的下标变量，光带的高度是height = 10决定的。
　　第45行是将人数值显示在光带的尾部，然后使用<P>分段标记控制换行并插入一个空行。
　　

我也说两句

E-File帐号：用户名：密码： [注册]

评论：（内容不能超过500字，如果您不填写用户名和密码只能以游客的身份发表评论。）

*评论内容将在30分钟以后显示！

发表须知：
一、用户须严格遵守国家法律和政策，包括但不限于《全国人大常委会关于维护互联网安全的决定》、《信息网络传播权保护条例》等规定，审慎、合法地利用伊妃（E-file）平台发表言论、作品。
二、用户的言论、行为若涉嫌违法或侵权，用户可能被强制承担因该行为直接或间接导致的全部法律责任。依照法律法规规定，伊妃（E-file）运营方有义务提供用户资料，有义务和权利采取删除、屏蔽、断开链接等各种必要措施。
三、伊妃（E-file）中心授权网络法律专业研究服务机构“网络法苑”为用户及客户提供包括免费咨询在内的全方位的法律支持。