Django电商网站添加购物车报ValueError问题求助

问题现象 #

点击购物车按钮后控制台返回500 Internal Server Error，终端报错：ValueError: invalid literal for int() with base 10: ''，无法正常在购物车页面显示商品。

相关代码 #

Python视图函数 #

def addtocart(request):
    if request.method == 'POST':
        if request.user.is_authenticated:
            prod_id = int(request.POST.get('product_id'))
            product_check = Product.objects.get(id=prod_id)
            if (product_check):
                if(Cart.objects.filter(user=request.user.id, product_id=prod_id)):
                    return JsonResponse({'status': "product alredy in cart"})
                else:
                    prod_qty = int(request.POST.get('product_qty'))
                    if product_check.quantity >= prod_qty :
                        Cart.objects.create(user=request.user, product_id=prod_id, product_qty=prod_qty)
                        return JsonResponse({'status': "Product added successfully."})
                    else:
                        return JsonResponse({'status': "Only"+ str(product_check.quantity) +" quantity available"})

            else:
                return JsonResponse({'status': "no such product found"})
            
        else:
            return JsonResponse({'status': "Login to Continue"})
        
    return redirect('/')

JavaScript代码 #

$(document).ready(function () { 
 $('.increment-btn').click(function (e) {
  e.preventDefault();

  var inc_value = $(this).closest ('.product_data').find('.qty-input').val();
  var value = parseInt(inc_value,10);
  value = isNaN(value) ? 0 : value;
  if(value < 10)

  {
    value++;
    $(this).closest ('.product_data').find('.qty-input').val(value);
 
  }

 });
 $('.decrement-btn').click(function (e) {
  e.preventDefault();

  var dec_value = $(this).closest ('.product_data').find('.qty-input').val();
  var value = parseInt(dec_value,10);
  value = isNaN(value) ? 0 : value;
  if(value > 1)

  {
    value--;
    $(this).closest ('.product_data').find('.qty-input').val(value);
 
  }


});
 // for ad to cart
 $('.addToCartBtn').click(function (e){
  e.preventDefault();
  var product_id = $(this).closest('.product_data').find('.prod_id').val();
  var product_qty = $(this).closest('.product_data').find('.qty-input').val();
  var token = $('input[name=csrfmiddlewaretoken]').val();
  
  $.ajax({
    method: "POST",
    url: "/add-to-cart/",
    data: {
      'product_id': product_id,
      'product_qty': product_qty,
      csrfmiddlewaretoken: token

    },
    success: function (response){
      console.log(response)
      alertify.success(response.status)

    }


  });

 });
// for ad to cart end
});

问题原因与解决方法 #

原因分析 #

报错是因为前端传递的product_id或product_qty为空字符串，后端直接用int()转换空值导致失败。此外，原代码未处理商品不存在的异常情况，也可能引发额外错误。

修复步骤 #

1. 后端视图增加参数校验与异常处理
   修改视图函数，先校验参数有效性，再处理业务逻辑：

   def addtocart(request):
       if request.method == 'POST':
           if request.user.is_authenticated:
               # 校验product_id
               prod_id_str = request.POST.get('product_id')
               if not prod_id_str or not prod_id_str.isdigit():
                   return JsonResponse({'status': "无效的商品ID"})
               prod_id = int(prod_id_str)
               
               # 处理商品不存在的情况
               try:
                   product_check = Product.objects.get(id=prod_id)
               except Product.DoesNotExist:
                   return JsonResponse({'status': "未找到该商品"})
               
               # 检查商品是否已在购物车
               if Cart.objects.filter(user=request.user, product_id=prod_id).exists():
                   return JsonResponse({'status': "商品已在购物车中"})
               else:
                   # 校验product_qty
                   prod_qty_str = request.POST.get('product_qty')
                   if not prod_qty_str or not prod_qty_str.isdigit():
                       return JsonResponse({'status': "无效的购买数量"})
                   prod_qty = int(prod_qty_str)
                   
                   if product_check.quantity >= prod_qty:
                       Cart.objects.create(user=request.user, product_id=prod_id, product_qty=prod_qty)
                       return JsonResponse({'status': "商品添加成功"})
                   else:
                       return JsonResponse({'status': f"仅剩余{product_check.quantity}件库存"})
           else:
               return JsonResponse({'status': "请先登录"})
       return redirect('/')
   

2. 前端确保参数完整性

   • 确保HTML中正确渲染商品ID输入框，并初始化数量输入框默认值：

     <div class="product_data">
         <input type="hidden" class="prod_id" value="{{ product.id }}">
         <input type="number" class="qty-input" value="1" min="1" max="10">
         <button class="increment-btn">+</button>
         <button class="decrement-btn">-</button>
         <button class="addToCartBtn">加入购物车</button>
     </div>
     

   • 在JS添加购物车函数中增加前端校验：

     $('.addToCartBtn').click(function (e){
         e.preventDefault();
         var product_id = $(this).closest('.product_data').find('.prod_id').val();
         var product_qty = $(this).closest('.product_data').find('.qty-input').val();
         var token = $('input[name=csrfmiddlewaretoken]').val();
         
         if (!product_id || !product_qty || isNaN(parseInt(product_qty,10)) || parseInt(product_qty,10) < 1) {
             alertify.error("商品信息或数量无效");
             return;
         }
         
         $.ajax({
             method: "POST",
             url: "/add-to-cart/",
             data: {
                 'product_id': product_id,
                 'product_qty': product_qty,
                 csrfmiddlewaretoken: token
             },
             success: function (response){
                 console.log(response)
                 alertify.success(response.status)
             },
             error: function(xhr) {
                 alertify.error(xhr.responseJSON.status);
             }
         });
     });
     

内容的提问来源于stack exchange，提问作者Ashok shah