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

3-3使用session实现购物功能

作者：老麻雀 2006/10/22 23:38:52

使用session实现购物功能
　　有不少人将session称为“购物车”。在超市里从不同货架上选购的商品，都放在购物车里，结账时从购物车中将所有选购的商品取出进行结算。这种比喻很形象的说明了session的功能和作用。下面的范例就是使用session充当购物车，实现购物的简单应用。
一、范例的演示和代码清单
　　演示的前提同以前的范例一样。
　　演示步骤：
1. 启动IE，在地址栏键入http://127.0.0.1:8080/ch3/ch3-2.htm，如图3-9：
图 3-9

2. 勾选所需文具商品的复选框，进行提交。
　　我们会看到，屏幕上出现 “购买完成”的提示，然后转到结算的网页，显示结算清单，如图3-10。
　　
　　图 3-10
3. 返回购物的网页，勾选不同品种的商品，进行提交。
　　这组网页由1个HTML网页ch3-2.htm和2个JSP网页ch3-2a.jsp、ch3-2b.jsp组成。ch3-2.htm提供购物的界面，ch3-2a.jsp将商品的名称和价格写入session，ch3-2b.jsp将session中的数据提取出来，计算总价格，然后将实际购物的情况显示出来。
　　3个网页的代码如下：
◇－◇－◇－◇－◇－◇－◇ 购买商品 ◇－◇－◇－◇－◇－◇－◇
范例ch3-2.htm
1) <html>
2) <hear><title>购买商品</title>
3) <style type="text/css">.style2 ｛font-size: large｝</style>
4) </head>
5) <body bgcolor="#FFFFcc">
6) <p class="style2">购买商品</p>
7) 请选择你购买的文具<br>
8) <form action="ch3-2a.jsp" method="post">
9) <table width="336" height="175" border="1" >
10) <tr>
11) <th width="76" scope="row">购买</th>
12) <th width="173">商品名称</th>
13) <th width="79">价格</th>
14) </tr>
15) <tr>
16) <td scope="row"><div align="center">
17) <input name="wenju1" type="checkbox" id="wenju1" value="圆珠笔">
18) </div></td>
19) <td>  圆珠笔</td>
20) <td> 3.20
21) <input name="jiage1" type="hidden" id="jiage1" value="3.20"></td>
22) </tr>
23) <tr>
24) <td scope="row"><div align="center">
25) <input name="wenju2" type="checkbox" id="wenju2" value="铅笔">
26) </div></td>
27) <td>   铅笔</td>
28) <td> 0.20
29) <input name="jiage2" type="hidden" id="jiage2" value="0.20"></td>
30) </tr>
31) <tr>
32) <td scope="row"><div align="center">
33) <input name="wenju3" type="checkbox" id="wenju3" value="练习本">
34) </div></td>
35) <td>   练习本</td>
36) <td> 1.50
37) <input name="jiage3" type="hidden" id="jiage3" value="1.50"></td>
38) </tr>
39) <tr>
40) <td scope="row"><div align="center">
41) <input name="wenju4" type="checkbox" id="wenju4" value="橡皮">
42) </div></td>
43) <td>  橡皮</td>
44) <td> 1.00
45) <input name="jiage4" type="hidden" id="jiage4" value="1.00"></td>
46) </tr>
47) </table>
48) <p> </p>
49) <table width="200">
50) <tr>
51) <th scope="row"><input type="submit" name="Submit" value="提交"></th>
52) <td><div align="center">
53) <input type="reset" name="Submit" value="重置">
54) </div></td>
55) </tr>
56) </table>
57) </form>
58) </body>
59) </html>

◇－◇－◇－◇－◇－◇ 购买商品-写入Session ◇－◇－◇－◇－◇
范例ch3-2a.jsp
1) <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
2) <html>
3) <head><title>购买商品-写入Session</title></head>
4) <body bgcolor="#FFFFcc">
5) <p>
6) <%
7) String name1=request.getParameter("wenju1");
8) String jiage1=request.getParameter("jiage1");
9) String name2=request.getParameter("wenju2");
10) String jiage2=request.getParameter("jiage2");
11) String name3=request.getParameter("wenju3");
12) String jiage3=request.getParameter("jiage3");
13) String name4=request.getParameter("wenju4");
14) String jiage4=request.getParameter("jiage4");
15) request.getSession(true);
16) session.putValue("name1",name1);
17) session.putValue("jiage1",jiage1);
18) session.putValue("name2",name2);
19) session.putValue("jiage2",jiage2);
20) session.putValue("name3",name3);
21) session.putValue("jiage3",jiage3);
22) session.putValue("name4",name4);
23) session.putValue("jiage4",jiage4);
24) out.println("<H2>购买完成,</H2><P>现在进入结算网页！");
25) response.setHeader("Refresh","1;URL=ch3-2b.jsp");
26) %>
27) </p>
28) </body>
29) </html>

◇－◇－◇－◇－◇－◇购买商品-读取Session◇－◇－◇－◇－◇－◇
范例ch3-2b.jsp
1) <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
2) <html>
3) <head><title>购买商品－读取Session</title></head>
4) <body bgcolor="#FFFFcc">
5) <%
6) String name1,jiage1,name2,jiage2,name3,jiage3,name4,jiage4;
7) name1=(String)session.getValue("name1");
8) jiage1=(String)session.getValue("jiage1");
9) name2=(String)session.getValue("name2");
10) jiage2=(String)session.getValue("jiage2");
11) name3=(String)session.getValue("name3");
12) jiage3=(String)session.getValue("jiage3");
13) name4=(String)session.getValue("name4");
14) jiage4=(String)session.getValue("jiage4");
15) float jg1,jg2,jg3,jg4,jgz;
16) jg1=Float.parseFloat(jiage1);
17) jg2=Float.parseFloat(jiage2);
18) jg3=Float.parseFloat(jiage3);
19) jg4=Float.parseFloat(jiage4);
20) if (name1==null)
21)    ｛name1="";
22)    jiage1="";
23)    jg1=0;｝
24) if (name2==null)
25)    ｛name2="";
26)    jiage2="";
27)    jg2=0;｝
28) if (name3==null)
29)    ｛name3="";
30)    jiage3="";
31)    jg3=0;｝
32) if (name4==null)
33)    ｛name4="";
34)    jiage4="";
35)    jg4=0;｝
36) jgz=jg1+jg2+jg3+jg4;
37) %>
38) <p class="style1">你购买的文具如下：</p>
39) <table width="384" border="1" cellspacing="0" bordercolor="#FF66CC">
40)   <tr>
41)     <th width="176" scope="row">商品</th>
42)     <th width="198">价格</th>
43)   </tr>
44)   <tr>
45)     <td scope="row">  <%=name1%> </td>
46)     <td><%=jiage1%></td>
47)   </tr>
48)   <tr>
49)     <td scope="row">  <%=name2%></td>
50)     <td><%=jiage2%></td>
51)   </tr>
52)   <tr>
53)     <td scope="row">  <%=name3%></td>
54)     <td><%=jiage3%></td>
55)   </tr>
56)   <tr>
57)     <td scope="row">  <%=name4%></td>
58)     <td><%=jiage4%></td>
59)   </tr>
60)   <tr>
61)     <th scope="row">金额</th>
62)     <td><%=jgz%></td>
63)   </tr>
64) </table>
65) <p><a href="ch3-2.htm">返回购物</a></p>
66) </body>
67) </html>

　　这个范例的设计思路是由ch3-2.htm提供购物的界面，供用户选购商品，选购提交的数据交ch3-2a.jsp进行处理。ch3-2a.jsp获得数据后，将商品的名称和价格写入session供以后结算使用。ch3-2b.jsp是结算的网页，他将session中的数据提取出来，统计计算后将购物的清单送到屏幕显示。
　　范例的网页设计中有一些前面范例没有涉及的知识和技巧。比如HTML表单中的“隐藏域”，JSP动态网页中“延时跳转网页”等，请读者注意下面的相关分析。
二、HTML表单网页的分析
　　在ch3-2.htm中商品的名称使用了“复选框”表单项，比较容易掌握。商品的价格使用了“隐藏域”，这是一种特殊的表单项。“隐藏域”中可以承载表单数据，但网页运行时（隐藏）用户看不见他，因此“隐藏域”中放置的一般是固定的、不能让用户改动的提交数据。
　　网页设计插入隐藏域的操作和添加其他表单项的方法一样，在Dreamweaver图形设计界面下，先确定插入的位置，在“表单”插入面板选择“隐藏域”点击插入，然后在属性面板中设定该隐藏域的“表单项名”和“值”。图3-11是插入本范例第四个隐藏域的图示，隐藏域在图形涉及界面下，显示为一个符号，注意图中下面属性面板设置的内容，表单项名设置为“jiage4”,值设置为“1.00”。
　　
　　
　　图 3-11
　　对应的代码如下：
44) <td> 1.00
45) <input name="jiage4" type="hidden" id="jiage4" value="1.00"></td>
　　第44行的含义：在这个单元格中插入“1.00”，这是显示给用户看的内容。
　　第45行的含义：仍在这个单元格中插入一个表单项，
　　               name="jiage4"   表单项名是“jiage4”
　　　　　　　　type="hidden"    表单项的类型是“隐藏域”
　　　　　　　　　" value="1.00"       表单项的值是“1.00”
　　注意：第44行的“1.00”不是表单项，不能提交，他只供用户看到价格是1.00。
　　第45行的" value="1.00"是表单项的值，能够提交。这样的设计方法，读者可能感觉有些复杂，以往的范例使用文本域（文本框），将初始值设定为“1.00”，又简单又明确，为什么要用隐藏域？如果使用文本域加初始值的方法，文本域中的“1.00”，只是一个初始值，用户是可以修改成任何其他数值的，这在网上商务网站中是不允许的。因此在商务站点设计中，所有提交的商品信息（商品名称、价格、型号等）都使用隐藏域的方式进行设计。
三、JSP动态网页的分析
　　ch3-2a.jsp的主要功能是获得商品数据，将数据写入session。
　　按照常规设计，应该还有选购第二类商品、第二类商品……的HTML网页和相应将数据写入session的JSP网页。并且在JSP网页中不是定义一大堆变量，而是定义一个数组变量承接获得的数据，使用循环语句写入session。每个JSP网页后面还应该有转到选购不同商品的连接和去结账的连接。读者可以参照范例，自己试一下。
　　这里ch3-2a.jsp没有按上述思路设计，目的是要介绍以前范例中没有使用过的两个代码行：
　　定义变量和获得数据同时完成的复合语句代码行：
7) String name1=request.getParameter("wenju1");
　　这条语句赋值＝号的左边是定义一个字符串型变量，右边是从HTML表单获得数据的语句，这样就将原来两行JSP代码行，合并成了一行。在今后的范例中这样简练的将越来越多。但也要注意这样的方法不是什么时候都能用的，不少情况下仍然需要先单独定义变量。
　　延时跳转网页的代码行：
24) out.println("<H2>购买完成,</H2><P>现在进入结算网页！");
25) response.setHeader("Refresh","1;URL=ch3-2b.jsp");
　　本范例只有一类商品供用户选购，选购完成就可以直接去结账。因此可以使用跳转网页的语句转向结算网页ch3-2.jsp。为了明确提示用户“购买完成去结算”，这里在转向结算网页前，插入了停留一秒钟的提示文字。
　　延时跳转网页的方法和前面介绍过的直接跳转网页的方法同属于JSP的默认类中response对象，response.setHeader("Refresh","1;URL=ch3-2b.jsp");语句的含义是延时一秒后跳转到网页ch3-2b.jsp。具体分析如下：
　　"Refresh"是HTTP的响应标头，
　　"1;URL=ch3-2b.jsp"是响应的内容，其中数值1的延时的时间，单位为秒。URL后面是转向的网页地址，可以使用完整的url（127.0.0.1:8080/ch3/ch3-2b.jsp），也可以使用当前网页的相对地址（ch3-2b.jsp）
　　刷新网页的代码：
　　将上面延时跳转网页的代码稍微改一下，时间参数给一个具体的数，并去掉URL参数，就可以实现网页自身的定时刷新。例如在某个需要10秒钟自动刷新一次的JSP网页中，插入下面的代码行就可以了：
　　response.setHeader("Refresh","10");
　　
　　ch3-2b.jsp的主要功能是从session中提取数据，再将其中的价格数据转换成浮点型，计算合计金额，最后使用表格形式将购物明细和合计金额送到屏幕上显示清单。
　　在常规的设计中，有多种商品在不同选购商品的网页将数据写入session。这一页可以将session中的所有数据一并取出，以字符串数组的类型返回。然后使用循环语句逐个处理每个数据。下面的代码行是用字符串数组a取回session中所有数据，再用循环语句逐个显示数据的参考代码：
　　String a[] = session.getValueNames();
　　for(int i=0;i< a.length;i++)
　　out.print("("+a[i]+") ");
　　ch3-2b.jsp网页在本范例中，只是取出一个购物网页写入session的数据。设计的思路是，先定义几个字符串变量，并把session中取出的数据赋值给他们（第6-14行）。再定义几个浮点型变量，用于商品的价格和商品总金额，使用数据类型转换语句得到浮点型的价格数据（第15-19行）。然后计算出总金额（第36行）。最后将所有数据送到屏幕上显示（第38-64行）。因为用户可能某些商品没有选购，这样写入session的就是空值，本网页处理这些数据时，就要产生异常，为了避免异常的产生，将这些数据进行了相应的处理（第20-35行）。
　　商务站点的购物车，在实际的设计中，一般使用数据库来实现，可更方便灵活，通用性强。具体的设计思路和方法将在后面的章节中介绍。

我也说两句

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

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

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

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