首页 > 代码库 > Ajax学习笔记-购物车

Ajax学习笔记-购物车

2024-07-26 06:10:37   222人阅读

wKioL1Q2SYPRBh7ZAACQ5cOHFcE328.jpg

<%@ 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></title>
<script type="text/javascript" src="http://www.mamicode.com/${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		//判断session里是否已经有shoppingCart
		var isHasCart = "${sessionScope.shoppingCart == null}";
		//如果session里没有shoppingCart，说明是第一次来到这个页面
		if(isHasCart == "true"){
			$("#cartstatus").hide();
		}else{
			$("#cartstatus").show();
			$("#bookName").text("${sessionScope.shoppingCart.bookName}");
			$("#totalBookNum").text("${sessionScope.shoppingCart.totalBookNum}");
			$("#totalMoney").text("${sessionScope.shoppingCart.totalMoney}");
		}
		
		$("a").click(function(){
			$("#cartstatus").show();
			var url = this.href;
			var args = {"time":new Date()};
			$.getJSON(url, args, function(data){
				$("#bookName").text(data.bookName);
				$("#totalBookNum").text(data.totalBookNum);
				$("#totalMoney").text(data.totalMoney);
			});
			return false;
		});
	})
</script>
</head>
<body>
<!-- 
1.获取当前页面所有的a结点，并为每一个a结点都添加onclick响应事件，同时取消其默认行为。
2.准备发送ajax请求：url（a结点的href属性值） args（时间戳）
3.响应为一个JSON对象，包括：bookName totalBookNum  totalMoney
4.把对应的属性添加到对应的位置
 -->
 <div id="cartstatus">
您已将<span id="bookName"></span>加入到购物车中，购物车中的书有<span id="totalBookNum"></span>本，总价是<span id="totalMoney"></span>元
</div>
<br/>
Java<a href="http://www.mamicode.com/${pageContext.request.contextPath}/addToCart?id=Java&price=100">加入购物车</a>
<br/>
Oracle<a href="http://www.mamicode.com/${pageContext.request.contextPath}/addToCart?id=Oracle&price=150">加入购物车</a>
<br/>
Struts2<a href="http://www.mamicode.com/${pageContext.request.contextPath}/addToCart?id=Struts2&price=180">加入购物车</a>
<br/>
</body>
</html>

ShoppingCartItem.java

public class ShoppingCartItem {
	private int number;
	private String bookName;
	private int price;
	//...
}

ShoppingCart.java  购物车

public class ShoppingCart {
	//key:书名   value:ShoppingCartItem对象
	private Map<String, ShoppingCartItem> items = new HashMap<String, ShoppingCartItem>();
	private String bookName;
	
	public void addToCart(String bookName, int price) {
		this.bookName = bookName;
		if (items.containsKey(bookName)) {
			ShoppingCartItem shoppingCartItem = items.get(bookName);
			shoppingCartItem.setNumber(shoppingCartItem.getNumber() + 1);
		}else{
			ShoppingCartItem shoppingCartItem = new ShoppingCartItem();
			shoppingCartItem.setBookName(bookName);
			shoppingCartItem.setNumber(1);
			shoppingCartItem.setPrice(price);
			items.put(bookName, shoppingCartItem);
		}
	}
	
	public int getTotalBookNum() {
		int total = 0;
		for (ShoppingCartItem item:items.values()) {
			total += item.getNumber();
		}
		return total;
	}
	
	public int getTotalMoney() {
		int money = 0;
		for (ShoppingCartItem item:items.values()) {
			money += item.getNumber() * item.getPrice();
		}
		return money;
	}
	
	public String getBookName() {
		return bookName;
	}
}

addToCart.java  servlet

		String bookName = request.getParameter("id");
		int price = Integer.parseInt(request.getParameter("price"));
		ShoppingCart shoppingCart = (ShoppingCart) request.getSession().getAttribute("shoppingCart");
		if (shoppingCart == null) {
			shoppingCart = new ShoppingCart();
			request.getSession().setAttribute("shoppingCart", shoppingCart);
		}
		shoppingCart.addToCart(bookName, price);
		StringBuilder result = new StringBuilder();
		result.append("{")
		//必须用双引号
		.append("\"bookName\":\"" + bookName + "\"")
		.append(",")
		.append("\"totalBookNum\":" + shoppingCart.getTotalBookNum())
		.append(",")
		.append("\"totalMoney\":" + shoppingCart.getTotalMoney())
		.append("}");
		
		response.setContentType("text/javascript");
		response.getWriter().print(result.toString());


本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1561834

Ajax学习笔记-购物车


联系
我们