007 Ajax中的购物车
1.大纲设计

2.shopingCartItem.java
package beans;
public class shopingCartItem {
private String bookname;//书对象
private int num; //书的数量
private int price; // 书的价格
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
public String getBookname() {
return bookname;
}
public void setBookname(String bookname) {
this.bookname = bookname;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
}
3.shopingCart.java
package beans; import java.util.HashMap;
import java.util.Map; public class shopingCart {
//存放shopingCartItem的map,键是书名,值是shopingCartItem对象
private Map<String,shopingCartItem> items=new HashMap<>();
/**
* 将书名与书的价格添加到购物车
* @param bookName
* @param price
*/
public void addToCart(String bookName,int price) {
if(items.containsKey(bookName)) {
shopingCartItem item=items.get(bookName);
item.setNum(item.getNum()+1);
}else {
shopingCartItem item=new shopingCartItem();
item.setBookname(bookName);
item.setPrice(price);
item.setNum(1);
items.put(bookName, item);
}
}
/**
* 返回书的总数量
* @return
*/
public int totalBookNumer() {
int totalNum=0;
for(shopingCartItem item:items.values()) {
totalNum+=item.getNum();
}
return totalNum;
}
/**
* 返回书的总价钱
*/
public int totalBookPrice() {
int totalPrice=0;
for(shopingCartItem item:items.values()) {
totalPrice+=item.getNum()*item.getPrice();
}
return totalPrice;
}
}
4.AddToCartServlet.java
package servlets; import java.io.IOException; import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession; import beans.shopingCart; public class AddToCartServlet extends HttpServlet { private static final long serialVersionUID = 1L; @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
} @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取请求参数
String bookName=request.getParameter("id");
int price=Integer.parseInt(request.getParameter("price"));
//获取购物车对象
HttpSession session=request.getSession();
shopingCart sc=(shopingCart)session.getAttribute("sc");
if(sc==null) {
sc=new shopingCart();
session.setAttribute("sc", sc);
}
//将点击的事件放入购物车
sc.addToCart(bookName, price);
//准备响应的JSON对象
StringBuilder result=new StringBuilder();
result.append("{")
.append("\"bookName\":\""+bookName+"\"")
.append(",")
.append("\"totalBookName\":\""+sc.totalBookNumer()+"\"")
.append(",")
.append("\"totalPrice\":\""+sc.totalBookPrice()+"\"")
.append("}"); //响应JSON对象
response.setContentType("text/javascript");
response.getWriter().print(result.toString());
} }
5.index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/shopcart/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
alert(1);
var url=this.href;
var args={"time":new Date()};
$.getJSON(url,args,function(data){
$("#bookName").text(data.bookName);
$("#totalBookName").text(data.totalBookName);
$("#totalPrice").text(data.totalPrice);
});
return false;
})
})
</script>
</head>
<body>
你已经将 <span id="bookName"></span> 加入到购物车中,
购物车中有 <span id="totalBookName"></span> 本书,
总价 <span id="totalPrice"></span> <br><br> Java<a href="${pageContext.request.contextPath}/addToCart?id=java&price=100">加入购物车</a><br>
Oracle<a href="${pageContext.request.contextPath}/addToCart?id=Oracle&price=100">加入购物车</a><br>
Ajax<a href="${pageContext.request.contextPath}/addToCart?id=Ajax&price=100">加入购物车</a><br>
</body>
</html>
6.效果

007 Ajax中的购物车的更多相关文章
- 转:AJAX中xhr对象详解
XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML ...
- Ajax中的get和post两种请求方式的异同
Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别. 1. get是把参数数据队列加到提交表单的A ...
- ajax中加上AntiForgeryToken防止CSRF攻击
经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...
- ajax中的application/x-www-form-urlencoded中的使用
ajax中的application/x-www-form-urlencoded中的使用一,HTTP上传的基本知识 在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定 ...
- ajax中网页传输(三)XML——下拉列表显示练习
XML:页面之间传递数据,跨平台传递 HTML:超文本标记语言,核心标签 XML的形势为 <xml version='1.0'> <Nation> <one> &l ...
- ajax中网页传输(一)TEXT——带有删除功能的数据库表格显示练习
网页之间传输的三种方式:TEXT.JSON.XML. 本章将讲解带有TEXT形势的ajax网页传输 第一:body部分代码 <title>ajax中TEXT讲解并且带有删除功能的表格< ...
- 记得ajax中要带上AntiForgeryToken防止CSRF攻击
经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...
- JavaScript中创建类,赋值给ajax中的data参数
缘由:因为要给根据是否选中checkbox来动态增加ajax中data的属性(ajax的data属性格式的几种方法,参考http://www.jb51.net/article/46676.htm) d ...
- 【转】Ajax中send方法参数的使用(get/post)
Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null. 例如 : ...
随机推荐
- js便携小方法,你值得拥有
引言: 本章没有深奥的讲解js一些底层原理,比如this指针.作用域.原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率,或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整 ...
- plsql developer导入数据库
需要指向导入命令
- 早该知道的7个JavaScript技巧
我写JavaScript代码已经很久了,都记不起是什么年代开始的了.对于JavaScript这种语言近几年所取得的成就,我感到非常的兴奋:我很幸运也是这些成就的获益者.我写了不少的文章,章节,还有一本 ...
- shell脚本安装部署反向代理 监控进程 计划任务
1.编写脚本自动部署反向代理.web.nfs: 要求: I.部署nginx反向代理三个web服务,调度算法使用加权轮询: 反向代理服务器脚本配置脚本 #!/bin/bash #安装eple和nginx ...
- js操作控制iframe页面的dom元素
1.代码1 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- 手动刷入Android 4.4.1 KOT49E OTA更新包
一.Android 4.4 KitKat Google前段时间发布了Android新版本Android 4.4 KitKat,由于我的Nexus 4也是托朋友从US带回来的,所以很快就收到了Googl ...
- mysql条件查询中AND与OR联合使用的注意事项!
mysql查询中经常会用到AND与OR一起使用的情况,可如果写法不对,往往会起到相反的效果,这不,前几天就碰到了,最后测试果然提了一堆bug!!!! 废话就不多说了,主要总结一下几点: 一 当mysq ...
- NB-iot 和 emtc两种技术区别
此前有报道称,工信部正在拟定推动窄频物联网(NB-IoT)标准化,并对NB-IoT模块外形.封装以及针脚定义等提出新规范.业内人士认为,标准出台后将促进物联网规模化商用全面提速,迎来行业成长爆发期. ...
- RabbitMQ--Hello world!(一)
Introduction RabbitMQ is a message broker. The principal idea is pretty simple: it accepts and forwa ...
- Python_oldboy_自动化运维之路(二)
本节内容: 1.pycharm工具的使用 2.进制运算 3.表达式if ...else语句 4.表达式for 循环 5.break and continue 6.表达式while 循环 1.pycha ...