Django电商项目添加购物车出现MultiValueDictKeyError错误求助

点击“Add To Cart”按钮后商品已成功加入购物车，但控制台出现Internal Server Error: MultiValueDictKeyError错误，以下是问题分析及解决方案：

相关代码 #

HTML代码 #

{% for p in products %}
<div class="bg-white h-[400] w-[400]">
    <div class=" flex bg-color1 text-sm text-white absolute p-2 m-4 rounded-full ">New</div>
    <img class="w-4/5 flex mx-auto mt-2" src={{ p.image.url }} alt="">
    <p class=" my-2 text-center text-sm">{{ p.category }}</p>
    <a href="{% url 'core:product-detail' p.pid %}" class="my-2 flex items-center justify-center text-color1 font-medium text-xl">{{ p.title }}</a>

    <div class="flex justify-center text-center mb-2">
        <span class="shop__price">{{ p.price }} Kč</span>
        <span class="text-sm line-through font-sm ml-2 text-color2">29.99 Kč</span>
    </div>
    <div class="add-cart flex justify-center text-center mb-2 ">
        <input type="hidden" value="{{ p.id }}" class="product-id-{{ p.id }}">
        <input type="hidden" value="{{ p.title }}" class="product-title-{{ p.id }}">
        <input type="hidden" value="{{ p.image.url }}" class="product-image-{{ p.id }}">
        <input type="hidden" value="{{ p.price }}" class="product-price-{{ p.id }}">
        <input type="hidden" value="{{ p.pid }}" class="product-pid-{{ p.id }}">
        <input type="hidden" value="1" class="product-qt-{{ p.id }}">

        <button class="add-to-cart-btn flex justify-center text-center mb-2" data-index="{{ p.id }}">
            <a type="submit" id="add_to_cart" class="pointer inline-block bg-color1 text-white px-3 py-2 rounded-md font-medium transition hover:bg-color2 button">Add To Cart</a>
        </button>
    </div>
</div>
{% endfor %}

JS代码 #

$("#add_to_cart, .add-to-cart-btn").on("click", function(){
  let this_val = $(this)
  let index = this_val.attr('data-index')
  let product_qt = $(".product-qt-" + index).val()
  let product_title = $(".product-title-" + index).val()
  let product_id = $(".product-id-" + index).val()
  let product_price = $(".product-price-" + index).val()
  let product_image = $(".product-image-" + index).val()
  let product_pid = $(".product-pid-" + index).val()
  
   $.ajax({
    url: '/add-to-cart',
    data: {
      'id': product_id,
      'pid': product_pid,
      'qt' : product_qt,
      'title' : product_title,
      'price' : product_price,
      'image' : product_image,
    },
    dataType: 'json',
    beforeSend: function(){
      console.log("addind the product")
    },
    success:function(response){
      console.log("product added")
      $(".cart-items-count").text(response.totalcartitems) 
    }
  })
})

视图函数代码 #

def add_to_cart(request):
    cart_product = {}

    cart_product[str(request.GET["id"])] = {
        'title':request.GET['title'],
        'qt':request.GET['qt'],
        'price':request.GET['price'],
        'image':request.GET['image'],
        'pid':request.GET['pid'],
    }

    if 'cart_data_obj' in request.session:
        if str(request.GET["id"]) in request.session['cart_data_obj']:

            cart_data = request.session['cart_data_obj']
            cart_data[str(request.GET['id'])]['qt'] = int(cart_product[str(request.GET["id"])]['qt'])
            cart_data.update(cart_data)
            request.session['cart_data_obj'] = cart_data
        else:
            cart_data = request.session['cart_data_obj']
            cart_data.update(cart_product)
            request.session['cart_data_obj'] = cart_data
    else:
        request.session['cart_data_obj'] = cart_product

    return JsonResponse({"data":request.session['cart_data_obj'], 'totalcartitems': len(request.session['cart_data_obj']) }) 

错误现象 #

• VSCode控制台：显示Internal Server Error 500，请求路径为/add-to-cart
• 浏览器控制台：显示GET /add-to-cart 500 (Internal Server Error)
• 错误详情：明确抛出MultiValueDictKeyError，提示某个请求参数不存在于request.GET中

问题原因 #

1. 重复事件触发+默认跳转：HTML中<button>嵌套了<a>标签，且循环生成的所有按钮都用了同一个id="add_to_cart"（id必须唯一）。点击时会触发两次请求：一次是AJAX带参数请求（成功添加商品），一次是<a>标签的默认跳转请求（无任何参数），无参数请求进入视图后，直接用request.GET['key']会抛出KeyError。
2. 视图参数访问不安全：直接通过下标访问request.GET的键，当键不存在时会直接报错，未做参数校验。

解决方案 #

1. 修改HTML，移除嵌套的<a>标签 #

将按钮样式直接应用在<button>上，避免默认跳转和重复id问题：

{% for p in products %}
<div class="bg-white h-[400] w-[400]">
    <div class=" flex bg-color1 text-sm text-white absolute p-2 m-4 rounded-full ">New</div>
    <img class="w-4/5 flex mx-auto mt-2" src={{ p.image.url }} alt="">
    <p class=" my-2 text-center text-sm">{{ p.category }}</p>
    <a href="{% url 'core:product-detail' p.pid %}" class="my-2 flex items-center justify-center text-color1 font-medium text-xl">{{ p.title }}</a>

    <div class="flex justify-center text-center mb-2">
        <span class="shop__price">{{ p.price }} Kč</span>
        <span class="text-sm line-through font-sm ml-2 text-color2">29.99 Kč</span>
    </div>
    <div class="add-cart flex justify-center text-center mb-2 ">
        <input type="hidden" value="{{ p.id }}" class="product-id-{{ p.id }}">
        <input type="hidden" value="{{ p.title }}" class="product-title-{{ p.id }}">
        <input type="hidden" value="{{ p.image.url }}" class="product-image-{{ p.id }}">
        <input type="hidden" value="{{ p.price }}" class="product-price-{{ p.id }}">
        <input type="hidden" value="{{ p.pid }}" class="product-pid-{{ p.id }}">
        <input type="hidden" value="1" class="product-qt-{{ p.id }}">

        <button class="add-to-cart-btn pointer inline-block bg-color1 text-white px-3 py-2 rounded-md font-medium transition hover:bg-color2 button" data-index="{{ p.id }}">
            Add To Cart
        </button>
    </div>
</div>
{% endfor %}

2. 修改JS，阻止默认行为并优化事件绑定 #

$(".add-to-cart-btn").on("click", function(e){
    // 阻止默认行为，避免无效跳转
    e.preventDefault();

    let this_val = $(this)
    let index = this_val.attr('data-index')
    let product_qt = $(".product-qt-" + index).val()
    let product_title = $(".product-title-" + index).val()
    let product_id = $(".product-id-" + index).val()
    let product_price = $(".product-price-" + index).val()
    let product_image = $(".product-image-" + index).val()
    let product_pid = $(".product-pid-" + index).val()
    
    $.ajax({
        url: '/add-to-cart',
        data: {
            'id': product_id,
            'pid': product_pid,
            'qt' : product_qt,
            'title' : product_title,
            'price' : product_price,
            'image' : product_image,
        },
        dataType: 'json',
        beforeSend: function(){
            console.log("添加商品中")
        },
        success:function(response){
            console.log("商品添加成功")
            $(".cart-items-count").text(response.totalcartitems) 
        },
        // 新增错误处理，方便调试
        error: function(xhr, status, error){
            console.error("添加失败:", error)
        }
    })
})

3. 修改视图函数，安全获取参数并校验 #

def add_to_cart(request):
    # 用get方法安全获取参数，不存在则返回None
    product_id = request.GET.get("id")
    product_pid = request.GET.get("pid")
    product_qt = request.GET.get("qt")
    product_title = request.GET.get("title")
    product_price = request.GET.get("price")
    product_image = request.GET.get("image")

    # 校验必要参数是否齐全，缺失则返回错误响应
    if not all([product_id, product_pid, product_qt, product_title, product_price, product_image]):
        return JsonResponse({"error": "缺少必要参数"}, status=400)

    cart_product = {}
    cart_product[str(product_id)] = {
        'title': product_title,
        'qt': product_qt,
        'price': product_price,
        'image': product_image,
        'pid': product_pid,
    }

    if 'cart_data_obj' in request.session:
        cart_data = request.session['cart_data_obj']
        if str(product_id) in cart_data:
            # 已有商品，累加数量（原逻辑是覆盖，改为累加更合理）
            cart_data[str(product_id)]['qt'] = int(cart_data[str(product_id)]['qt']) + int(product_qt)
        else:
            cart_data.update(cart_product)
        request.session['cart_data_obj'] = cart_data
    else:
        request.session['cart_data_obj'] = cart_product

    return JsonResponse({"data": request.session['cart_data_obj'], 'totalcartitems': len(request.session['cart_data_obj'])})

内容的提问来源于stack exchange，提问作者Michal Šanda