用django实现购物车的商品加减功能

本文介绍了一种在网页上实现商品购物车增减功能的方法,通过HTML、JavaScript和后端交互,动态更新商品数量。文章详细展示了按钮、数量显示元素的布局,以及通过AJAX调用后端API进行数据同步的实现细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先写出html代码

<button goodsid="{{ good.id }}" class="subShopping">-</button>
<span>0</span>
<button goodsid="{{ good.id }}" class="addShopping">+</button>

这里写出两个按钮,一个用来加数据,一个用来减数据,中间的span用来显示商品数量

 

然后是js实现功能

 

$('.addShopping').click(function(){
var span = $(this)
goodsid = $(this).attr('goodsid')
//console.log($(this).prev())
//设置回调函数进行数据交互
$.getJSON("/App/addcart/",{"goodsid":goodsid},function (data) {


if (data["status"] == "777") {
//target="_self" 这是不去打开新窗口,而是在当前窗口加载新的路径
window.open("/App/login/",target="_self")
}else if (data["status"] == "200"){

console.log(span.prev())
//拿到button前面的标签
span.prev().html(data["num"])

}
})
})

这里提前给出了json所要交互的视图函数

 

写出view视图函数

def addcart(request):
data = {
'status':'200',
}

获取js中回调函数(getJSON)传过来的参数

goodsid = request.GET.get('goodsid')
register_id = request.session.get('register_id')

if not register_id:
data['status']='777'
else:


goods = CartModel.objects.filter(userid=register_id).filter(goodsid=goodsid)
if goods.exists():
good = goods.first()
good.c_num = good.c_num + 1

good.save()
data['num'] = good.c_num
else:
good = CartModel()
good.userid_id = register_id
good.goodsid_id = goodsid
good.c_num = 1

good.save()
data['num'] = good.c_num
return JsonResponse(data)

 

这个是简略的一部分代码,数据库以及部分的html没有给出

 

转载于:https://www.cnblogs.com/ushio/p/9742234.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值