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

一、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处理的更多相关文章

[改善Java代码]枚举项的数量限制在64个以内
为了更好的使用枚举,Java提供了两个枚举集合:EnumSet和EnumMap,这两个集合的使用方法都比较简单,EnumSet表示其元素必须是某一枚举的枚举项,EnumMap表示Key值必须是某一枚举 ...
Python项目之我的第一个爬虫----爬取豆瓣图书网，统计图书数量
今天,花了一个晚上的时间边学边做,搞出了我的第一个爬虫.学习Python有两个月了,期间断断续续,但是始终放弃,今天搞了一个小项目,有种丰收的喜悦.废话不说了,直接附上我的全部代码. # -*- co ...
【JavaWeb】图书管理系统【总结】
感想该项目是目前为止,我写过代码量最多的项目了.....虽然清楚是没有含金量的[跟着视频来写的],但感觉自己也在进步中...... 写的过程中,出了不少的问题.....非常多的Servlet,JSP ...
bookStore项目总结
感想该项目是目前为止,我写过代码量最多的项目了-..虽然清楚是没有含金量的[跟着视频来写的],但感觉自己也在进步中-.. 写的过程中,出了不少的问题-..非常多的Servlet,JSP看得眼花-.. ...
bookStore第三篇【用户模块、购买模块、订单模块】
用户模块要登陆后才能购买,因此我们先写购买模块设计实体 private String id; private String username; private String password; p ...
购物车【JavaWeb小项目、简单版】
前言为了巩固MVC的开发模式,下面就写一个购物车的小案例.. ①构建开发环境导入需要用到的开发包建立程序开发包 ②设计实体书籍实体 public class Book { private St ...
[项目构建十一]babasport 购物车的原理及实现.
今天来开始写一下关于购物车的东西, 这里首先抛出四个问题: 1)用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后不登录用户名和密码问:购物车商品还在吗? 2)用户登陆了用户名密码,添加商品, ...
京东Java架构师讲解购物车的原理及Java实现
今天来写一下关于购物车的东西, 这里首先抛出四个问题: 1)用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后不登录用户名和密码问:购物车商品还在吗? 2)用户登陆了用户名密码,添加商品,关闭浏 ...
[改善Java代码] 枚举项数量限定为64个以内
建议89:枚举项的数量限制在64个以内为了更好的使用枚举,java 提供了两个枚举集合:EnumSet和EnumMap,这两个集合的使用都比较简单,EnumSet表示其元素必须是某一枚举的枚举项,E ...

随机推荐

CommonJS,AMD,RequireJS的差别
RequireJS实现了AMD的API. CommonJS是使用exports对象来定义模块的一种方法,它定义了模块的内容.简单地实现一个CommonJS的定义就像以下这样: // someModul ...
AnyForWeb告诉你什么才是“最好的”编程语言
一被问到最好的编程语言是什么,专家们一定会异口同声的说,'世界上根本没有什么最好的,每一种编程语言都有它存在的意义和价值'. AnyForWeb认为,后半句所阐述的观点全然没错,但最好的也并不是不存在 ...
在SAE上使用Ueditor的图片上传功能
SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务. 一.开通Storage服务在SAE控制台开通Storage服务,并新增一个doma ...
Android App 内存泄露之Thread
Thread 内存泄露线程也是造成内存泄露的一个重要的源头.线程产生内存泄露的主要原因在于线程生命周期的不可控. 1.看一下以下是否存在问题 <span style="white-s ...
ubuntu dig timeout解决方法，dnscat执行失败也是这个原因
dig 失败一般是什么原因?怎么排查? sudo vi /etc/resolvconf/resolv.conf.d/head 写入: nameserver 223.5.5.5nameserver 22 ...
Pycharm使用入门
Python安装与Pycharm使用入门一.安装Python 1.Linux下安装一般系统默认已安装2.6.6版本,升级成2.7版本, 但 2.6 不能删除,因为系统对它有依赖,epel源里最新的 ...
category的概念
category 的意思应该是为基类添加一个子类的声明方法可以在创建基类对象的时候访问到子类的对象方法 category 可以说是类的扩展也可以说是将类分成了几个模块需要注意的是在cate ...
Python学习网络爬虫--转
原文地址:https://github.com/lining0806/PythonSpiderNotes Python学习网络爬虫主要分3个大的版块:抓取,分析,存储另外,比较常用的爬虫框架Scra ...
微信小程序实现图片双滑缩放大小
在做小程序开发的过程中,后端传来一张图片地图,需要实现双手指滑动,使图片缩放,最终得出了一下代码: js : Page({ data: { touch: { distance: , scale: , ...
MySQL高级查询和编程基础
第一章数据库设计一.数据需求分析: 数据需求分析是为后续概念设计和逻辑结构设计做准备. 结构:(1)对现实世界要处理的对象进行详细的调查. (2)收集基础数.据. (3)对所收集的数据进行处理. ...

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

改动购物项图书数量的Ajax处理的更多相关文章

随机推荐

热门专题