Ajax学习笔记-购物车

最新推荐文章于 2020-07-17 09:10:44 发布

原创最新推荐文章于 2020-07-17 09:10:44 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

101 篇文章

订阅专栏

<%@ 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="${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="${pageContext.request.contextPath}/addToCart?id=Java&price=100">加入购物车</a>
<br/>
Oracle<a href="${pageContext.request.contextPath}/addToCart?id=Oracle&price=150">加入购物车</a>
<br/>
Struts2<a href="${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());

补充：Jackson的使用

public class Customer {
	private int id;
	private String name;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
	
	public String getCity() {
		return "北京";
	}
	//忽略一个getter属性
	@JsonIgnore
	public String getBirth() {
		return "1990-12-31";
	}

	public Customer(int id, String name) {
		super();
		this.id = id;
		this.name = name;
	}

	public static void main(String[] args) throws JsonGenerationException, JsonMappingException, IOException {
		ObjectMapper mapper = new ObjectMapper();
		Customer customer = new Customer(0, "umgsai");
		String jsonString = mapper.writeValueAsString(customer);
		System.out.println(jsonString);
		//Jackson使用getter方法来定位JSON对象的属性
		//{"name":"umgsai","id":0,"city":"北京"}
	}
}

本例使用的Jar包是jackson-all-1.7.6.jar

教程中加的是下面三个包

jackson-annotation-2.2.2.jar

jackson-core-2.2.2.jar

jackson-databind-2.2.2.jar

本文出自 “优赛工作室” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1561834