Ajax修改购物车示例
1.购物车类的设计
ShoppingCartItem：书的封装，包括书名，数量，价格三个属性，以及对应的getter和setter方法。
ShoppingCart：购物车封装类，items为 Map<String, ShoppingCartItem> ,以及加入购物车，得到购物车中书的总数量以及总价格三个函数。
2：jsp加入购物车，超链接中带入书名以及价格
<body>
<!-- 加入span的目的是为了定位 -->
<div id="cartstatus">
您已经将
<span id="bookName"></span>加入到购物车中,购物车中有
<span id="totalBookNumber"></span>本书,总价格是
<span id="totalMoney"></span>
</div>
<br>
<br>
java
<a
href="${pageContext.request.contextPath}/addToCart?id=java&price=100">加入购物车</a>
<br>
ajax
<a
href="${pageContext.request.contextPath}/addToCart?id=ajax&price=200">加入购物车</a>
<br>
jquery
<a
href="${pageContext.request.contextPath}/addToCart?id=jquery&price=300">加入购物车</a>
<br>
</body>
<!--${pageContext.request.contextPath}获取该项目的绝对路径 -->
3：addToCart -----servlet的设计
步骤如下：
1） ：获取请求参数 id(bookName),price，是从jsp页面中的超链接来获取的
2）：在session中获取购物车对象，如果session属性中没有购物车，则新建一个购物车对象放置在session属性中
3) : 加入购物车操作Shopping.addToCart(bookName, price);
4）:想ajax传递Json对象，该对象包括 :{""bookName"":"totalBookNumber","totalMoney" },若从服务器端返回json对象，则属性名必须使用双引号！！
5）：响应json请求,response.getWriter().print(json);
public class AddToCartServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//1:获取请求参数 id(bookName),price
String bookName =request.getParameter("id");
int price =Integer.parseInt(request.getParameter("price"));
//2：获取购物车对象，在session中
ShoppingCart sc=(ShoppingCart) request.getSession().getAttribute("sc");
if(sc==null){
sc=new ShoppingCart();
request.getSession().setAttribute("sc",sc);
}
//3；将点击的对象加入到购物车中
sc.addToCart(bookName, price);
//4:准备响应的Json对象:{""bookName"":"totalBookNumber","totalMoney" }
//若从服务器端返回json对象，则属性名必须使用双引号！！
StringBuilder sBuilder=new StringBuilder();
sBuilder.append("{")
.append("\"bookName\":\""+bookName+"\"")
.append(",")
.append("\"totalBookNumber\":\""+sc.getTotalBookNumber()+"\"")
.append(",")
.append("\"totalMoney\":\""+sc.getTotalMoney()+"\"")
.append("}");
//响应json请求
response.setContentType("text/javascript");
response.getWriter().print(sBuilder.toString());
}
}
上述中的用StringBuilder来拼接JSON字符串的方式可以借助第三方开源Jackson来简化实现：
String jsonStr=null;
ObjectMapper objectMapper=new ObjectMapper();
jsonStr=objectMapper.writeValueAsString(sc);
4:ajax接受从服务器传来的参数{""bookName"":"totalBookNumber","totalMoney" }
步骤：
1）：为加入购物车这个超链接增加单击响应函数，并取消默认行为（return false）
2）：通过 HTTP GET 请求载入 JSON 数据。$.getJSON(url, [data], [callback])
准备url.agrs,并在回调函数内部将购物车中的内容显示在Jsp页面中。
3):通过jquery中的hide(),show()方法，判断是不是第一使用购物车，如果是第一次使用，则jsp页面不显示购物车。
<head>
<!--${pageContext.request.contextPath}获取该项目的绝对路径 -->
<script type="text/javascript"
src="${pageContext.request.contextPath}/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var isHasCart="${sessionScope.sc==null}";
if(isHasCart=="true"){
$("#cartstatus").hide();//隐藏显示的元素
}else{
$("#cartstatus").show(); //显示隐藏的匹配元素
$("#bookName").text("${sessionScope.sc.bookName}");
$("#totalBookNumber").text("${sessionScope.sc.totalBookNumber}");
$("#totalMoney").text("${sessionScope.sc.totalMoney}");
}
$("a").click(function(){
$("#cartstatus").show();
var url=this.href; //url属性
var agrs={"time":new Date()}; //时间戳
$.getJSON(url,agrs,function(data){
$("#bookName").text(data.bookName);
$("#totalBookNumber").text(data.totalBookNumber);
$("#totalMoney").text(data.totalMoney);
});
return false;
});
});
</script>
</head>
相关推荐
-
使用Ajax、json实现京东购物车结算界面的数据交互实例
<div class="goodsList_menu"> <div class="goodsList"> <div class="goodsListfl"> <input class="fl" style="margin:15px 10px 0 10px;" type="checkbox" name="" /> <
-
php实现产品加入购物车功能（1）
今天在练习购物车以及提交订单,写的有点头晕,顺便也整理一下,这个购物车相对来说比较简单,用于短暂存储,并没有存储到数据库,购物车对于爱网购的人来说简直是熟悉的不能再熟悉了,在写购物车之前,我们首先要构思一下,我们需要先从数据库中调出一张表格,这里我用的是fruit表,其次是登录表,我用的是login表,用来调用户名和密码的,所有的都准备好之后就要考虑放入购物车是会有三种情况的: 第一种情况:购物车里面什么都没有 第二种情况:购物车里面已经有此产品了,再次加入 这种情况下考虑到的是 数量要+1 第
-
Ajax + PHP session制作购物车
购物车网页代码,具体内容如下 1.登录界面login.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <
-
使用Python的Django框架结合jQuery实现AJAX购物车页面
Django中集成jquery 首先,静态的资源通常放入static文件夹中: static/ css/ djquery.css samples/ hello.css js/ jquery-1.7.1.min.js samples/ hello.js 其中css和js都按照应用名称(这里是samples)划分文件夹,如果文件较多,还可以再划分子文件夹. Django通常使用模板来展现html,而且我们通常使用继承的模板,所以需要将共用的元素,比如全局的css,对jquery.js的引入等,写到b
-
php 购物车完整实现代码
1.商品展示页面 复制代码 代码如下: <table width="255" border="0" cellspacing="0" cellpadding="0"><tr><td width="130" rowspan="6"><div align="center"><?php if(trim($i
-
PHP session实现购物车功能
在wamp环境下,用PHP的session会话控制完成购物车的效果,数据存放在数组里练习,没有连接数据库,效果不错,简单易懂,以下是各部分的代码 common.php <?php header("content-type:text/html;charset=utf-8"); $arrPro = array( array('id'=>1,'img'=>'img/1.jpg','title'=>'小米移动电源5000mAh','price'=>49), arr
-
php 购物车的例子
//购物车session的产生代码 if(! $session && ! $scid) { /* session用来区别每一个购物车,相当于每个车的身份证号: scid只用来标识一个购物车id号,可以看做是每个车的名字: 当该购物车的id和session值两者都不存在时,就产生一个新购物车 */ $session = md5(uniqid(rand())); /* 产生一个唯一的购物车session号 rand()先产生个随机数,uniqid()再在该随机数的基础上产生一个独一无二的字符串
-
php购物车实现代码
ShopCar.php 复制代码 代码如下: <?php class Shopcar { //商品列表 public $productList=array(); /** * * @param unknown_type $product 传进来的商品 * @return true 购物车里面没有该商品 */ public function checkProduct($product) { for($i=0;$i<count($this->productList);$i++ ) { if($
-
php实现购物车功能（上）
本文分两篇为大家介绍php实现购物车功能,具有一定的参考价值,相信大家一定喜欢. 1.需求分析 我们需要找到一种将数据库连接到用户的浏览器的方法.用户能够按目录浏览商品. 用户应该能够从商品目录中选取商品以便此后的购买.我们也要能够记录他们选中的物品. 当用户完成购买,要合计他们的订单,获取运送商品细节,并处理付款. 创建一个管理界面,以便管理员在上面添加.编辑图书和目录. 2.解决方案 2.1 用户视图 2.2 管理员视图 2.3 Book-O-Rama中的文件列表 3.实现数据库3.1 创建
-
简单的前端js+ajax 购物车框架(入门篇)
今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc