ajax（五） Ajax应用：加入购物车-优快云博客

本文链接：https://blog.youkuaiyun.com/xiongwt/article/details/50511416

本文探讨了如何利用Ajax技术实现在网页上的购物车功能，通过异步交互更新页面内容，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax的加入购物车功能应用

页面：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 }/js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		var isHasCart = "${sessionScope.sc==null}";
		if(isHasCart=="true"){
			$("#cartstatus").hide();
		}else{
			$("#cartstatus").show();
			$("#bookName").text("${sessionScope.sc.bookName}");
			$("#totalBookNumber").text("${sessionScope.sc.totalBookNumber}");
			$("#totalMoney").text("${sessionScope.sc.totalMoney}");
		}
		$("a").click(function(){
			$("#cartstatus").show();
			var url = this.href;
			var args = {"time":new Date()};
			$.getJSON(url,args,function(data){
				$("#bookName").text(data.bookName);
				$("#totalBookNumber").text(data.totalBookNumber);
				$("#totalMoney").text(data.totalMoney);
			});
			return false;
		});
	});
</script>
</head>
<body>
	<div id="cartstatus">
		您已经将 <span id="bookName"></span> 加入到购物车中。
		购物车中的书有 <span id="totalBookNumber"></span> 本。
		总价格 <span id="totalMoney"></span> 元钱。
	</div>
	Java  <a href="${pageContext.request.contextPath }/addToCart?id=Java&price=100">加入购物车</a>
	<br><br>
	Oracle  <a href="${pageContext.request.contextPath }/addToCart?id=Oracle&price=200">加入购物车</a>
	<br><br>
	Struts2  <a href="${pageContext.request.contextPath }/addToCart?id=Struts2&price=300">加入购物车</a>
	<br><br>
</body>
</html>

beans:ShoppingCart.java

package ajax.app.beans;

import java.util.HashMap;
import java.util.Map;

public class ShoppingCart {
	private Map<String,ShoppingCartItem> items = new HashMap<String,ShoppingCartItem>();
	private String bookName;
	
	public String getBookName() {
		return bookName;
	}

	public void addToCart(String bookName,int price){
		this.bookName = bookName;
		if(items.containsKey(bookName)){
			ShoppingCartItem item = items.get(bookName);
			item.setNumber(item.getNumber()+1);
		}else{
			ShoppingCartItem item = new ShoppingCartItem();
			item.setBookName(bookName);
			item.setPrice(price);
			item.setNumber(1);
			
			items.put(bookName, item);
		}
	}
	
	public int getTotalBookNumber(){
		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;
	}
}

ShoppingCartItem

package ajax.app.beans;

public class ShoppingCartItem {
	private int number;
	private String bookName;
	private int price;
	public int getNumber() {
		return number;
	}
	public void setNumber(int number) {
		this.number = number;
	}
	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;
	}
}

servlet:AddToCartServlet

package ajax.app.beans.servlets;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import ajax.app.beans.ShoppingCart;

@WebServlet("/addToCart")
public class AddToCartServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String bookName = request.getParameter("id");
		int price = Integer.parseInt(request.getParameter("price"));
		HttpSession session = request.getSession();
		ShoppingCart sc = (ShoppingCart) session.getAttribute("sc");
		if(sc==null){
			sc = new ShoppingCart();
			session.setAttribute("sc", sc);
		}
		sc.addToCart(bookName, price);
		StringBuilder result = new StringBuilder();
		//响应的JSON对象：{"bookName":"Java","totalBookNumber":10,"totalMoney":2000}
		result.append("{")
			  .append("\"bookName\":\""+bookName+"\"")
			  .append(",")
			  .append("\"totalBookNumber\":"+sc.getTotalBookNumber())
			  .append(",")
			  .append("\"totalMoney\":"+sc.getTotalMoney())
			  .append("}");
		response.setContentType("text/javascript");
		response.getWriter().print(result);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

效果图