本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’，视频讲的非常好，推荐新手观看学习

https://www.bilibili.com/video/BV1vt41147K8?p=1

实现功能为：

在商品详情页面，选择想要购买的数量，点击“加入购物车”按钮，实现右上角的购物车数量增加，并且页面其他信息保持不变。

一般处理按钮点击后，需要重新查询刷新整个页面的信息，但是很多需求只是刷新局部或一小部分信息，因此可以通过发送Ajax请求实现，注意ajax请求都是在后台运行的，前台不会展示运行的过程。

Ajax请求过程为：

1. 前端页面发起ajax请求（这里使用jQuery）将数据传递给后端

2. 后端执行请求地址相对应的视图函数，返回json内容

3. ajax执行相应的回调函数。接收返回的json数据并执行后续操作

编辑详情页面的前端js代码

1、jQuery获取标签元素对象为：$('.classname')

2、获取子标签：$('.classname').children('标签名')

3、获取文本内容为：.text()

4、获取值属性为：.val()

5、设置标签值为在获取值的方法中加入参数，该参数就是想要设置成为的值

6、注意点击事件如果想要调用其他的方法，不能直接写成.click(function_name())，还是得写成.click(function (){function_name()})，即在匿名方法中再调用其他的方法

7、isNaN() 函数可用于判断其参数是否是 NaN，该值表示一个非法的数字。

8、发起Ajax请求写法，$.post('/cart/add/', parameter, function(data){....}) 第一个参数为请求提交的地址，第二个参数为传给后台的数据，第三个参数为回调函数，即后台处理完成后，会调用这个回调函数，参数data为后台返回的数据，在回调函数中，使用返回的数据重新设置页面的部分数据

{% block endfiles %}

<div class="add_jump"></div>

<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js'%}"></script>

<script type="text/javascript">

//计算总价

update_goods_amout()

function update_goods_amout(){

    //获取单价

    price = $('.show_pirze').children('em').text()

    //获取数量

    count = $('.num_show').val()

    //计算总价

    amount = price * count

        //刷新界面总价

        $('.total').children('em').text(amount.toFixed(2)+'元')

}

//加号点击事件

$('.add').click(function(){

    calculate(1)

})

//减号点击事件

$('.minus').click(function(){

    calculate(-1)

})

//加减数量

function calculate(num){

    //获取原数量

    count = $('.num_show').val()

    //+-1

    count = parseInt(count) + num

    if (count <=0){

        count = 1

    }

    //刷新界面

    $('.num_show').val(count)

    //更新总价

    update_goods_amout()

}

//手动输入商品数量

$('.num_show').blur(function(){

    //获取数量

    count = $(this).val()

    //校验数量，

    if (isNaN(count) || count.trim().length==0 || parseInt(count) <=0){

        //刷新数量

        count = 1

        $(this).val(parseInt(count))

    }

    //更新总价

    update_goods_amout()

})

//获取add_cart div元素左上角的坐标

var $add_x = $('#add_cart').offset().top;

var $add_y = $('#add_cart').offset().left;

//获取show_count div元素左上角的坐标

var $to_x = $('#show_count').offset().top;

var $to_y = $('#show_count').offset().left;

//点击加入购物车的click事件

$('#add_cart').click(function(){

    //获取数量

    count = $('.num_show').val()

    //获取商品ID,手动给加入购物车按钮新增一个属性goods_id

    goods_id = $(this).attr('goods_id')

    //csrf验证信息

    csrf = $('input[name="csrfmiddlewaretoken"]').val()

    //组织参数

    parameter = {

        'goods_id': goods_id,

        'count': count,

        'csrfmiddlewaretoken': csrf

    }

    //发起Ajax请求，第三个参数function为回调函数

    $.post('/cart/add/', parameter, function(data){

        if (data.status == 'S'){

            //添加成功

            //购物车加入成功的动态效果

            $(".add_jump").css({'left':$add_y+80,'top':$add_x+10,'display':'block'})

            $(".add_jump").stop().animate(

                {'left': $to_y+7,

                    'top': $to_x+7},

                "fast",

                function() {

                    $(".add_jump").fadeOut('fast',function(){

                        //刷新右上角购物车数量

                        $('#show_count').html(data.cart_count);

                        });

                });

            }

        else{

            //添加失败

            alert(data.errmsg)

        }

    })

})

</script>

{% endblock endfiles %}

编辑请求提交的URL

编辑cart应用的urls.py文件

from django.urls import path

from .views import CartView, CartAddView

urlpatterns = [

    path('add/', CartAddView.as_view(), name='add'),

    path('', CartView.as_view(), name='cart'),

]

编辑处理请求的类视图

编辑cart应用的view.py文件

1、这里判断用户是否登录时，是手动写的校验，而不是像user应用中继承LoginRequiredMixin，原因是因为如果继承了LoginRequiredMixin，谷歌浏览器按F12打开后台运行情况查看，后台确实会访问重定向到的登录页面，但是由于这里提交的是Ajax请求，前台并不会跳转成登录页面，所以用户体验来说是这个跳转是无效的。

2、获取前台传过来的商品和数量，校验成功后，将其添加至购物车redis数据库中，然后返回新的购物车数据

3、返回的是JsonResponse对象，返回值内容为json格式

from django.views.generic import View

from django.http import JsonResponse

from goods.models import Goods

from django_redis import get_redis_connection

class CartAddView(View):

    '''加入购物车处理视图'''

    def post(self, request):

        user = request.user

        context = {

            'status': 'E',

            'errmsg': ''

        }

        # 判断是否登录

        if not user.is_authenticated:

            context['errmsg'] = '用户未登录!'

            return JsonResponse(context)

        # 接收数据

        goods_id = request.POST.get('goods_id')

        count = request.POST.get('count')

        # 校验数据

        # 数据是否完整

        if not all([goods_id, count]):

            context['errmsg'] = '数据不完整!'

            return JsonResponse(context)

        # 商品是否存在

        try:

            goods_id = int(goods_id)

            goods = Goods.objects.get(id=goods_id)

        except Exception as e:

            context['errmsg'] = '用户未登录!'

            return JsonResponse(context)

        # 数量格式是否正确

        try:

            count = int(count)

        except Exception as e:

            context['errmsg'] = '商品数量格式不正确!'

            return JsonResponse(context)

        # 逻辑处理：添加购物车

        # 连接redis

        connect = get_redis_connection('default')

        cart = 'cart_%d'%(user.id)

        # 获取原购物车中goods_id的数量

        old_count = connect.hget(cart, goods_id)

        if old_count:

            count += int(old_count)

        # 判断是否超过库存

        if count > goods.onhand:

            context['errmsg'] = '超出库存数量!'

            return JsonResponse(context)

        # 将新数量保存至数据库

        connect.hset(cart, goods_id, count)

        # 获取新购物车数量

        cart_count = connect.hlen(cart)

        # 返回数据

        context['status'] = 'S'

        context['cart_count'] = cart_count

        return JsonResponse(context)

巴特西

DJANGO-天天生鲜项目从0到1-009-购物车-Ajax实现添加至购物车功能

编辑详情页面的前端js代码

编辑请求提交的URL

编辑处理请求的类视图

最新文章

热门文章