007 Ajax中的购物车

时间:2023-03-08 17:42:14

1.大纲设计

  007 Ajax中的购物车

2.shopingCartItem.java

 package beans;

 public class shopingCartItem {
private String bookname;//书对象
private int num; //书的数量
private int price; // 书的价格
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
public String getBookname() {
return bookname;
}
public void setBookname(String bookname) {
this.bookname = bookname;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
}

3.shopingCart.java

 package beans;

 import java.util.HashMap;
import java.util.Map; public class shopingCart {
//存放shopingCartItem的map,键是书名,值是shopingCartItem对象
private Map<String,shopingCartItem> items=new HashMap<>();
/**
* 将书名与书的价格添加到购物车
* @param bookName
* @param price
*/
public void addToCart(String bookName,int price) {
if(items.containsKey(bookName)) {
shopingCartItem item=items.get(bookName);
item.setNum(item.getNum()+1);
}else {
shopingCartItem item=new shopingCartItem();
item.setBookname(bookName);
item.setPrice(price);
item.setNum(1);
items.put(bookName, item);
}
}
/**
* 返回书的总数量
* @return
*/
public int totalBookNumer() {
int totalNum=0;
for(shopingCartItem item:items.values()) {
totalNum+=item.getNum();
}
return totalNum;
}
/**
* 返回书的总价钱
*/
public int totalBookPrice() {
int totalPrice=0;
for(shopingCartItem item:items.values()) {
totalPrice+=item.getNum()*item.getPrice();
}
return totalPrice;
}
}

4.AddToCartServlet.java

 package servlets;

 import java.io.IOException;

 import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession; import beans.shopingCart; public class AddToCartServlet extends HttpServlet { private static final long serialVersionUID = 1L; @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
} @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取请求参数
String bookName=request.getParameter("id");
int price=Integer.parseInt(request.getParameter("price"));
//获取购物车对象
HttpSession session=request.getSession();
shopingCart sc=(shopingCart)session.getAttribute("sc");
if(sc==null) {
sc=new shopingCart();
session.setAttribute("sc", sc);
}
//将点击的事件放入购物车
sc.addToCart(bookName, price);
//准备响应的JSON对象
StringBuilder result=new StringBuilder();
result.append("{")
.append("\"bookName\":\""+bookName+"\"")
.append(",")
.append("\"totalBookName\":\""+sc.totalBookNumer()+"\"")
.append(",")
.append("\"totalPrice\":\""+sc.totalBookPrice()+"\"")
.append("}"); //响应JSON对象
response.setContentType("text/javascript");
response.getWriter().print(result.toString());
} }

5.index.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/shopcart/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
alert(1);
var url=this.href;
var args={"time":new Date()};
$.getJSON(url,args,function(data){
$("#bookName").text(data.bookName);
$("#totalBookName").text(data.totalBookName);
$("#totalPrice").text(data.totalPrice);
});
return false;
})
})
</script>
</head>
<body>
你已经将&nbsp;<span id="bookName"></span>&nbsp;加入到购物车中,
购物车中有&nbsp;<span id="totalBookName"></span>&nbsp;本书,
总价&nbsp;<span id="totalPrice"></span>&nbsp;<br><br> Java<a href="${pageContext.request.contextPath}/addToCart?id=java&price=100">加入购物车</a><br>
Oracle<a href="${pageContext.request.contextPath}/addToCart?id=Oracle&price=100">加入购物车</a><br>
Ajax<a href="${pageContext.request.contextPath}/addToCart?id=Ajax&price=100">加入购物车</a><br>
</body>
</html>

6.效果

  007 Ajax中的购物车