Ajax学习笔记-购物车

<%@ 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></title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		//判断session里是否已经有shoppingCart
		var isHasCart = "${sessionScope.shoppingCart == null}";
		//如果session里没有shoppingCart,说明是第一次来到这个页面
		if(isHasCart == "true"){
			$("#cartstatus").hide();
		}else{
			$("#cartstatus").show();
			$("#bookName").text("${sessionScope.shoppingCart.bookName}");
			$("#totalBookNum").text("${sessionScope.shoppingCart.totalBookNum}");
			$("#totalMoney").text("${sessionScope.shoppingCart.totalMoney}");
		}

		$("a").click(function(){
			$("#cartstatus").show();
			var url = this.href;
			var args = {"time":new Date()};
			$.getJSON(url, args, function(data){
				$("#bookName").text(data.bookName);
				$("#totalBookNum").text(data.totalBookNum);
				$("#totalMoney").text(data.totalMoney);
			});
			return false;
		});
	})
</script>
</head>
<body>
<!-- 
1.获取当前页面所有的a结点,并为每一个a结点都添加onclick响应事件,同时取消其默认行为。
2.准备发送ajax请求:url(a结点的href属性值) args(时间戳)
3.响应为一个JSON对象,包括:bookName totalBookNum  totalMoney
4.把对应的属性添加到对应的位置
 -->
 <div id="cartstatus">
您已将<span id="bookName"></span>加入到购物车中,购物车中的书有<span id="totalBookNum"></span>本,总价是<span id="totalMoney"></span>元
</div>
<br/>
Java<a href="${pageContext.request.contextPath}/addToCart?id=Java&price=100">加入购物车</a>
<br/>
Oracle<a href="${pageContext.request.contextPath}/addToCart?id=Oracle&price=150">加入购物车</a>
<br/>
Struts2<a href="${pageContext.request.contextPath}/addToCart?id=Struts2&price=180">加入购物车</a>
<br/>
</body>
</html>

ShoppingCartItem.java

public class ShoppingCartItem {
	private int number;
	private String bookName;
	private int price;
	//...
}

ShoppingCart.java  购物车

public class ShoppingCart {
	//key:书名   value:ShoppingCartItem对象
	private Map<String, ShoppingCartItem> items = new HashMap<String, ShoppingCartItem>();
	private String bookName;

	public void addToCart(String bookName, int price) {
		this.bookName = bookName;
		if (items.containsKey(bookName)) {
			ShoppingCartItem shoppingCartItem = items.get(bookName);
			shoppingCartItem.setNumber(shoppingCartItem.getNumber() + 1);
		}else{
			ShoppingCartItem shoppingCartItem = new ShoppingCartItem();
			shoppingCartItem.setBookName(bookName);
			shoppingCartItem.setNumber(1);
			shoppingCartItem.setPrice(price);
			items.put(bookName, shoppingCartItem);
		}
	}

	public int getTotalBookNum() {
		int total = 0;
		for (ShoppingCartItem item:items.values()) {
			total += item.getNumber();
		}
		return total;
	}

	public int getTotalMoney() {
		int money = 0;
		for (ShoppingCartItem item:items.values()) {
			money += item.getNumber() * item.getPrice();
		}
		return money;
	}

	public String getBookName() {
		return bookName;
	}
}

addToCart.java  servlet

		String bookName = request.getParameter("id");
		int price = Integer.parseInt(request.getParameter("price"));
		ShoppingCart shoppingCart = (ShoppingCart) request.getSession().getAttribute("shoppingCart");
		if (shoppingCart == null) {
			shoppingCart = new ShoppingCart();
			request.getSession().setAttribute("shoppingCart", shoppingCart);
		}
		shoppingCart.addToCart(bookName, price);
		StringBuilder result = new StringBuilder();
		result.append("{")
		//必须用双引号
		.append("\"bookName\":\"" + bookName + "\"")
		.append(",")
		.append("\"totalBookNum\":" + shoppingCart.getTotalBookNum())
		.append(",")
		.append("\"totalMoney\":" + shoppingCart.getTotalMoney())
		.append("}");

		response.setContentType("text/javascript");
		response.getWriter().print(result.toString());
时间: 2024-11-05 22:36:01

Ajax学习笔记-购物车的相关文章

[ajax 学习笔记] json数据格式

之前写过ajax传送数据可以用普通文本和XML两种格式.这里记一下json数据格式. json:javascript object notation. 之前分析过,用文本和XML传送数据各有优劣.而json可以轻松地将javascript对象转换成可以随时发送的数据. 一个json数据例子: var people = { "programmers": [ { "firstName": "Brett", "lastName":&

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本

[ajax 学习笔记] ajax 的服务器响应

在上一篇[ajax 学习笔记] ajax初试中,简单了解了一下ajax. 我是参考AJAX详解.chm学习的,资源已上传.参考链接:Ajax 专题 今天又学习了ajax中关于服务器响应的一些知识. ajax中服务器的响应是通过响应函数将服务器返回的数据呈现到页面的.服务器的响应体现在服务器响应回调函数中. 在上一篇的例子中,响应函数为: function updatePage(){ if(xmlHttp.readyState == 4){ //http就绪状态 if(xmlHttp.status

Ajax学习笔记(三)

三.jQuery库详解 1.使用jQuery之后,javascript操作的不再是HTML元素对应的DOM对象,而是包装DOM对象的jQuery对象.js通过调用jQuery对象的方法来改变它所包装的DOM对象的属性,从而实现动态更新HTML页面. 由此可见,使用jQuery动态更新HTML页面只需以下两个步骤: (1)获取jQuery对象.jQuery对象通常是DOM对象的包装 (2)调用jQuery对象的方法来改变自身.当jQuery对象被改变时,jQuery包装的DOM对象随之改变,HTM

ajax学习笔记1

ajax是什么? ajax即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.能够快速的从服务器获得所需数据和内容,实现局部刷新让用户能够更好的浏览网站.在没有ajax的时候,网页提交表单必须进行等待和刷新,这时用户必须等待服务器的响应,用户在当前页面不能做其他事情.自从有了ajax,用户在提交表单的时候不需要等待,可以浏览该页的其它东西,表单提交之后服务器能很快的返回所需的数据和网页,网页无需刷新. a

AJax 学习笔记二(onreadystatechange的作用)

AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能.这类似于回调函数的做法.onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果,如: 复制代码 代码如下: ajaxObj=createAjaxObject(); var url="/MyTod

Ajax学习笔记(一)

XMLHttpRequest对象详解 1.Ajax应用中我们使用XMLHttpRequest对象异步发送请求,这种请求既可以是GET,也可以是POST,都可以带请求参数. 请求发送出去之后,服务器响应会在合适的时候返回,但是客户端不会自动加载这种异步响应,程序必须先调用XMLHttpRequest对象的responseText或responseXML来获取    服务器响应,再通过DOM操作将服务器响应动态加载到当前页面中. XMLHttpRequest的用处是:提供与服务器异步通信的能力 2.

jQuery中的Ajax学习笔记

前段时间学习了<锋利的jQuery第六章>jQuery与Ajax应用,现做如下笔记: 我们先来了解一下,什么是Ajax呢?Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),它并不是指一种单一的技术,而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体.简短地说,在不重载整个页面的情况下,Ajax通过后台加载数据,并在网页上进行显示. 我们来简要回顾一下Ajax.早在1998年,微软就引入了一个ActiveX控件,从而能

Ajax学习笔记

Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码. 前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进行完