码迷,mamicode.com
首页 > Web开发 > 详细

改动购物项图书数量的Ajax处理

时间:2017-06-09 12:31:29      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:int   att   .com   function   public   other   nan   cond   war   

一、cart.jsp页面

<%@ 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?

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 ?

‘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>


二、改动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");
	
	}

}

三、改动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;
	}


改动购物项图书数量的Ajax处理

标签:int   att   .com   function   public   other   nan   cond   war   

原文地址:http://www.cnblogs.com/cynchanpin/p/6971335.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!