使用AJAX修改把商品添加到购物车

最新推荐文章于 2022-04-28 17:41:25 发布

原创最新推荐文章于 2022-04-28 17:41:25 发布 · 652 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #ajax

本文介绍了一种使用AJAX技术动态更新购物车商品数量的方法，通过后台Servlet处理请求，实现商品添加操作，并利用JSON响应更新前端显示，避免了页面刷新。

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

使用AJAX修改把商品添加到购物车

protected void ajaxAddItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        获取请求的参数商品编号
        int id = WebUtils.parseInt(req.getParameter("id"),0);
//        调用bookService.queryBookById(id): Book得到图书的信息
        Book book = bookService.queryBookById(id);
//        把图书信息，转换成为CartItem商品项
        CartItem cartItem=new CartItem(book.getId(),book.getName(),1,book.getPrice(),book.getPrice());
//        调用cart.addItem( cartItem);添加商品项
        Cart cart = (Cart) req.getSession().getAttribute("cart");
        if (cart==null)
        {
            cart =new Cart();
            req.getSession().setAttribute("cart",cart);
            cart.addItem(cartItem);
        }
        cart.addItem(cartItem);

//                重定向回商品列表页面
        req.getSession().setAttribute("lastName",cartItem.getName());
        Map<String,Object> resultMap= new HashMap<String,Object>();
        resultMap.put("totalCount",cart.getTotalCount());
        resultMap.put("lastName",cartItem.getName());
        Gson gson =new Gson();
        String s = gson.toJson(resultMap);
        resp.getWriter().write(s);

    }

<script	type="text/javascript">
	$(function () {

		// 给加入购物车按钮绑定单机事件
		$("button.addToCart").click(function () {
    		var bookId=$(this).attr("bookId");
			// location.href="http://localhost:8080/book_03/cartServlet?action=addItem&id="+bookId;
			$.getJSON("http://localhost:8080/book_03/cartServlet","action=ajaxAddItem&id="+bookId,
					function (msg) {
				$("#totalCount").text("您的购物车有"+msg.totalCount+"件商品");
				$("#lastName").text("刚刚把"+msg.lastName+"加入了购物车");
			})





		});

	});
</script>
<c:if test="${empty sessionScope.cart.items}">
					<span id="totalCount"></span>
					<div>
						<span id="lastName" style="color: red">您的购物车为空</span>
					</div>
				</c:if>
				<c:if test="${not empty sessionScope.cart.items}">
				<span id="totalCount">您购物车里有${sessionScope.cart.totalCount}件商品</span>
				<div>
					您刚刚将<span id="lastName" style="color: red">${sessionScope.lastName}</span>加入到了购物车中
				</div>
				</c:if>