要求:
编写两个页面,一个显示一些历史图书的名称和价格,一个显示一些计算机书的名称和价格。每本书后面都有一个链接——购买,单击该链接,能够将该书本加到购物车;每个也卖弄上都有链接——显示购物车,单击该链接,能够显示购物车的内容;每个内容后面都有一个“删除”链接,单击该链接,将该图书从购物车中删除。
思路:
整个项目共有4个jsp文件,分别是历史类图书(histotyClass.jsp),计算机类图书(computerClass.jsp),网上书店图标和地址(info.jsp),购物车显示(cart.jsp)。在历史类图书(histotyClass.jsp)和计算机类图书(computerClass.jsp)两个页面中,都有跳转到这两个页面的链接,还列出了一些各自类别的图书信息,每本书的信息用表单保存,当用户点击某本书后面的”加入到购物车”按钮时,会提交相应的表单到本页面,由jsp程序段保存到用户session。
除此之外,还有一个”查看我的购物车”按钮,当用户点击此按钮时,会跳转到购物车页面(cart.jsp),在cart.jsp中,会执行jsp程序段读取用户session,将用户添加到购物车的每一本图书用表单显示,在每一个表单后设置”删除”按钮,用户点击”删除”按钮可以将该本书从购物车中移除。
info.jsp中包含了书店的图标和地址信息,用”include”指令包含在每个页面中。
代码:
historyClass.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>21世纪书店--历史类图书</title>
<style type="text/css">
input{
background:pink;
border:0px solid #c00;
}
</style>
</head>
<body>
<div align="center">
<h2 align="center">欢迎来到21世纪书店</h2>
图书分类>>>
<a href="historyClass.jsp">历史类图书</a>
<a href="computerClass.jsp">计算机类图书</a><br>
<p>***书籍列表***</p>
<form action="" method="post">
<input type="text" name="book" value="《鱼羊野史》 高晓松 178.1元" size="40" maxlength="200" readonly>
<input type="submit" name="add" value="加入购物车" height="2">
</form>
<form action="" method="post">
<input type="text" name="book" value="《明朝那些事儿》 当年明月 199.0元" size="40" maxlength="200" readonly>
<input type="submit" name="add" value="加入购物车" height="2">
</form>
<%
request.setCharacterEncoding("utf-8");
//获取要加入购物车的图书名
String book=request.getParameter("book");
//获取session
ArrayList books=(ArrayList)session.getAttribute("books");
if(books==null){
books=new ArrayList();
session.setAttribute("books",books);
}
if(book!=null){
books.add(book);
out.println("<script type='text/javascript'>alert('加入购物车成功');</script>");
}
%>
<br>
<input type="button" value="查看我的购物车 " onClick="location.href='cart.jsp'"><br>
</div>
<%@ include file="info.jsp" %>
</body>
</html>
computerClass.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>21世纪书店--历史类图书</title>
<style type="text/css">
input{
background:pink;
border:0px solid #c00;
}
</style>
</head>
<body>
<div align="center">
<h2 align="center">欢迎来到21世纪书店</h2>
图书分类>>>
<a href="historyClass.jsp">历史类图书</a>
<a href="computerClass.jsp">计算机类图书</a><br>
<p>***书籍列表***</p>
<form action="" method="post">
<input type="text" name="book" value="《Java Web程序设计》 郭克华 39.5元" size="40" maxlength="200" readonly>
<input type="submit" name="add" value="加入购物车" height="2">
</form>
<form action="" method="post">
<input type="text" name="book" value="《Android Studio实战》 【美】Adam 47.2元" size="40" maxlength="200" readonly>
<input type="submit" name="add" value="加入购物车" height="2">
</form>
<%
request.setCharacterEncoding("utf-8");
String book=request.getParameter("book");
ArrayList books=(ArrayList)session.getAttribute("books");
if(books==null){
books=new ArrayList();
session.setAttribute("books",books);
}
if(book!=null){
books.add(book);
out.println("<script type='text/javascript'>alert('加入购物车成功');</script>");
}
%>
<br>
<input type="button" value="查看我的购物车 " onClick="location.href='cart.jsp'"><br>
</div>
<%@ include file="info.jsp" %>
</body>
</html>
cart.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>21世纪书店--我的购物车</title>
<style type="text/css">
input{
background:pink;
border:0px solid #c00;
}
</style>
</head>
<body>
<div align="center">
<h2 align="center">欢迎来到21世纪书店</h2>
图书分类>>>
<a href="historyClass.jsp">历史类图书</a>
<a href="computerClass.jsp">计算机类图书</a><br>
<p >>>>我的购物车</p><br>
<%
request.setCharacterEncoding("utf-8");
ArrayList books=(ArrayList)session.getAttribute("books");
for(int i=0;i<books.size();i++){
if(books.get(i)!=null){
String ss=(String)books.get(i);
//将已添加到购物车的图书信息保存在表单中
%>
<form action="" method="post">
<input type="text" name="book" value="<%= ss%>" size="40" maxlength="200" readonly>
<input type="submit" value="删除">
</form>
<%
}
}
//获取要删除的图书的信息
String delbook=request.getParameter("book");
if(delbook!=null){
//out.println("要删除的书是 "+delbook+"<br>");
for(int j=0;j<books.size();j++){
String book=(String)books.get(j);
if(book==null){
books.remove(j);
}
if(book!=null && book.indexOf(delbook)!=-1){
books.remove(j);
//刷新当前页面
%>
<script type="text/javaScript">
alert("删除成功");
window.location.href=window.location.href;
</script>
<%
break;
}
}
}
%>
</div>
<%@ include file="info.jsp" %>
</body>
</html>
cart.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<hr>
<center>
<a href="index.jsp"><img src="images/logo.jpg" width=100 height=80></a><br>
地址:XXXXXXXXXXXXXXXXXXXXXXX
</center>
运行结果:
总结:
获取名为”name”的session:
session.getAttribute("name");
将对象books存入session,名为”name”
session.setAttribute("name",books);
jsp程序段内输出js代码(简单的例子)
out.println("<script type='text/javascript'>alert('加入购物车成功');</script>");