改動購物項圖書數量的Ajax處理

時間 2019-12-01

標籤改動購物圖書數量 ajax 處理欄目 Ajax 简体版

原文原文鏈接

1、cart.jsp頁面javascript

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 <!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">
<base href="http://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/" />
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//★給所有刪除連接加入點擊事件
		$(".delete").click(function(){
			if(!window.confirm("你肯定要刪除該購物項嗎？")){
				return false; //不讓連接提交
			}
		});

		//給所有顯示書的數量的輸入框加入失去焦點的事件
		$(".count").blur(function(){
			var count =this.value;//獲得輸入框中的數值
			if(isNaN(count)){
				count=1;
			}
			
			count=count*1;//→轉爲number類型
			if(count<=0){
				count=1;
			}
			
			var bookId=this.id;//this表明了當前的輸入框中的內容
			
			//在這裏需要在其變化以前保存下來以便於在function中使用
			var inputEle=this; //它是一個dom對象		
			//window.location.href = "${pageContext.request.contextPath}/client/CartServlet?
method=update&count="+count+"&bookId="+bookId;

			//★改動購物項圖書數量的Ajax處理★ 這個時候需要發送Ajax請求
			var path="client/CartServlet"; //上面加了base標籤
			var params={method:"update",count:count,bookId:bookId};
			//data的數據類型{count:2,itemPrice:20,totalCount:5,totalPrice:50}
			var success=function(data){//→需要更新四處
				//獲得總數量
				$("#totalCount").html(data.totalCount);
				//獲得總價
				$("#totalPrice").html(data.totalPrice);
				//更新購物項中的圖書數量
				inputEle.value=data.count;//將數據放進去
				//獲得小計
				$(inputEle).parent().parent().find(".itemPrice").html(data.itemPrice);
			}
			
			
			$.post(path,params,success,"json");
				
					
		});
		
		//給<button>+</button>加入點擊事件
		
	 	$(".increase").click(function(){
			//獲得 數量首先,先找button的父元素，再找子元素
			var $countEle=$(this).parent().find("input");
			
			var count=$countEle.val();//獲得文本框中的值
			    count=count*1+1;//轉爲number類型後再作運算\		
			//獲取書的id
			var bookId=$countEle.attr("id");
		   //現在改成發送Ajax請求
			
			var path="client/CartServlet";
			var params={method:"update",count:count,bookId:bookId};
			var success=function(data){
				$("#totalCount").html(data.totalCount);
				$("#totalPrice").html(data.totalPrice);
				//更新書的數量
				$countEle.val(data.count);
				//獲得小計
				$countEle.parents("tr").find(".itemPrice").html(data.itemPrice);
				
				
			};
			
			$.post(path,params,success,"json");
			
		
		}); 
		

		//給<button>-</button>加入點擊事件
		$(".decrease").click(function(){
			//獲得數量
			var $countEle = $(this).parent().find("input");
			var count = $countEle.val();//鏈式調用
			count = count*1-1;
	
			if(count<=1){
				count=1;
			} 
			
			//書的id
			var bookId = $countEle.attr("id");
			//請求
			//window.location.href = "${pageContext.request.contextPath}/client/CartServlet?method=update&count="+count+"&bookId="+bookId;
			//改成Ajax請求。。。。
			var path="client/CartServlet";
			var params={method:"update",count:count,bookId:bookId};
			var success=function(data){
				$("#totalCount").html(data.totalCount);
				$("#totalPrice").html(data.totalPrice);
				//更新書的數量
				$countEle.val(data.count);
				//找當前行的小計
				$countEle.parents("tr").find(".itemPrice").html(data.itemPrice);
				
			};
		
			$.post(path,params,success,"json");
		});	
	});
	
	
	
	

</script>

</head>
<body>
	<center>
		<h2>個人購物車</h2>
			<c:choose>
				<c:when test="${empty CART || empty CART.map }">
					購物車裏面尚未書，立刻去<a href="client/BookClientServlet?html
method=getPageInCondition">購物</a>	
				</c:when>
				
				<c:otherwise>
					<table border="1" cellpadding="10" cellspacing="0">
						<tr>
							<td>書名</td>
							<td>單位價格</td>
							<td>數量</td>
							<td>小計</td>
							<td>操做</td>
						</tr>
					
						<c:forEach items="${CART.map }" var="entry">
							<tr>
								<td>${entry.value.book.bookName}</td>
								<td>${entry.value.book.price}</td>
								<td>
									<button class="decrease" <%-- ${entry.value.count<=1 ?java
 'disabled="false"' : ''} --%>>-</button>
									<input id="${entry.key}" class="count" type="text" value="${entry.value.count}" style="width: 30px;"/>
									<button class="increase">+</button>
								</td>
								<td ><span class="itemPrice">${entry.value.itemPrice}</span></td>
								<td><a class="delete" href="client/CartServlet?method=delete&bookid=${entry.key}">刪除</a></td>
							</tr>						
						
						</c:forEach>
						
						
						<tr>
							<td><a id="clear" href="client/CartServlet?method=clear" >清空購物車</a></td>
							<td><a
								href="client/BookClientServlet?method=getPageInCondition">繼續購物</a></td>
							<td>共<span id="totalCount">${CART.totalCount }</span>本書</td>
							<td>總價:<span id="totalPrice">${CART.totalPrice }</span>元</td>
							<td><a href="client/OrderServlet?method=listAllAddress">去結算</a></td>
						</tr>
					</table>
				</c:otherwise>
			
			</c:choose>		
	</center>

</body>
</html>jquery

2、改動CartServlet

package com.atguigu.bookstore.servlet.client;

import com.atguigu.bookstore.bean.Book;
import com.atguigu.bookstore.fun.Cart;
import com.atguigu.bookstore.service.impl.BookServiceImpl;
import com.atguigu.bookstore.service.impl.CartServiceImpl;
import com.atguigu.bookstore.service.inter.BookService;
import com.atguigu.bookstore.service.inter.CartService;
import com.atguigu.bookstore.servlet.BaseServlet;
import com.atguigu.bookstore.utils.WebUtils;
import com.google.gson.Gson;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CartServlet extends BaseServlet {
	private static final long serialVersionUID = 1L;
	CartService cartService=new CartServiceImpl();
	BookService bookService=new BookServiceImpl();
	
	protected void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("add....");
		String bookid = request.getParameter("bookid");
		Book book = bookService.getBookById(bookid);
		Cart cart = WebUtils.getCart(request);
		cartService.add(book, cart);

		//要獲得這種數據{"bookName":"java", "totalCount": 2}	怎麼得？	
		String bookName = book.getBookName();
		int totalCount = cart.getTotalCount();
		
		
		//使用Gson可以獲得以上類型的數據,但是需要一個源，這個僅僅有map和
		//src是一個通常對象或map對象。在這裏僅僅能用map對象。因爲假設是通常對象，所需要一個類中包括不了這2種屬性，還得又一次定義類，挺麻煩的	
		//而src是map對象時就不需要在又一次定義類了，
		
		Map<String, Object>map=new HashMap<String, Object>();	
		map.put("bookName", bookName); //取數據的時候是data.bookName;
		map.put("totalCount", totalCount);	
		
		String jsonStr=new Gson().toJson(map);
		
		response.setContentType("text/json;charset=utf-8");
		response.getWriter().write(jsonStr);
			
		
	}
	
	protected void delete(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("delete...");
		String bookid = request.getParameter("bookid");
		Cart cart = WebUtils.getCart(request);
		cartService.deleteItem(Integer.parseInt(bookid), cart);
		WebUtils.myForward(request, response, "/client/book/cart.jsp");
		
	}
	protected void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("update....");
		String count = request.getParameter("count");
		String bookId = request.getParameter("bookId");
		
		Map<String, Object>map=cartService.updateCount(Integer.parseInt(bookId),
				Integer.parseInt(count), WebUtils.getCart(request));
		
//		WebUtils.myForward(request, response, "/client/book/cart.jsp"); //不用這種方式了
		
	//要返回的數據類型：{count:2,itemPrice:20,totalCount:5,totalPrice:50}，那麼怎樣獲得呢？可以更改updateCount方法，使其返回一個map集合
		
		
		String json = new Gson().toJson(map);		
		response.setContentType("text/json;charset=utf-8");
		response.getWriter().write(json);
		
		
		
		
		
	}
	
	protected void clear(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {	
		System.out.println("clear....");
		cartService.clear(WebUtils.getCart(request));
		WebUtils.myForward(request, response, "/client/book/cart.jsp");
	
	}

}

3、改動CartServiceImpl

<span style="white-space:pre">	</span>@Override
	public Map<String, Object> updateCount(int BookId, int count, Cart cart) {
		Map<String, Object>map=new HashMap<String, Object>();
		CartItem cartItem = cart.getMap().get(BookId);
		cartItem.setCount(count);
		//{count:2,itemPrice:20,totalCount:5,totalPrice:50}，
		map.put("count", count);
		map.put("itemPrice", cartItem.getItemPrice());
		map.put("totalCount", cart.getTotalCount());
		map.put("totalPrice", cart.getTotalPrice());

		return map;
	}