改动购物项图书数量的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 ...
随机推荐
- BA-DDC与PLC的比较(转载)
1.概念 DDC(Direct Digital Control ) ,根据字面的意思为直接的数据控制,它包含了对采集数据的数字化以及对数据的数字处理.DDC的产生式随着楼宇控制.能源管理的需求,以及为 ...
- [SharePoint2010开发入门经典]SPS2010开发工具
本章概要: 1.了解不同的开发SPS的方法 2.了解SPS开发工具和环境 3.使用VS2010和SPD还有Blend开发SPS
- Linux用户管理案例(第二版)
批量添加用户 1.按照/etc/passwd文件格式编写用户信息文件users.info xiaofang01::1001:503::/home/xiaofang01:/bin/bash #注意不能 ...
- TeamTalk Android代码分析(业务流程篇)---消息发送和接收的整体逻辑说明
第一次纪录东西,也没有特别的顺序,想到哪里就随手画了一下,后续会继续整理- 6.2消息页面动作流程 6.2.1 消息页面初始化的总体思路 1.页面数据的填充更新直接由页面主线程从本地数据库请求 2.数 ...
- QFileSystemModel只显示名称,不显示size,type,modified
Qt 提供的 QFileSystemModel可以提供文件目录树预览功能,但是预览的都自带了Name,size,type, modified等信息.我现在只想显示name这一列,不想显示size,ty ...
- c语言循环案例
do while #include <stdio.h> #include <stdlib.h> int main() { int a = 1,b = 10; do { b -= ...
- 百度开源其NLP主题模型工具包,文本分类等场景可直接使用L——LDA进行主题选择本质就是降维,然后用于推荐或者分类
2017年7月4日,百度开源了一款主题模型项目,名曰:Familia. InfoQ记者第一时间联系到百度Familia项目负责人姜迪并对他进行采访,在本文中,他将为我们解析Familia项目的技术细节 ...
- poj--3169--Layout(简单差分约束)
Layout Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9098 Accepted: 4347 Descriptio ...
- Android: HowTo设置app不被系统kill掉
有一种方法可以设置app永远不会被kill,AndroidManifest.xml 中添加: android:persistent="true" 适用于放在/system/app下 ...
- JQuery事件绑定,bind与on区别
jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...