添加多件商品时AJAX功能失效问题求助

核心问题 #

当购物车存在多件商品时，模板循环渲染会生成多个拥有相同ID的表单和元素（比如addCartID、removeCartID、quantityID）。jQuery通过ID选择器绑定事件时，只会作用于页面中第一个匹配的元素，后续商品的加减按钮点击时，无法触发AJAX逻辑，直接执行了表单的默认提交行为，导致页面跳转到接口地址并显示JSON响应。

修复步骤 #

1. 替换模板中重复的ID为类名，避免ID冲突
2. 调整JS逻辑，通过当前触发事件的表单上下文，获取对应商品的参数，而非全局ID选择器
3. 修正视图中潜在的商品ID错误（add_to_cart中product_id无意义减1的问题）

修正后的代码 #

cart.html

把所有重复ID替换为类名，通过表单内部的相对选择器获取元素：

<div class="quantity__row">
    <form action="{% url 'remove_cart' %}" method="post" class="remove-cart-form">
        {% csrf_token %}
        {{ item.update_quantity_form.quantity }}
        {{ item.update_quantity_form.update }}
        <input type="hidden" name="product_id" value="{{ item.product.id }}" class="product-id-input">
        <input type="submit" value="-" class="quantity__number-minus"> 
    </form>
                                            
    <input type="number" min="1" value={{ item.quantity }} readonly="readonly" class="quantity__input quantity-input"/>
                                            
    <form action="{% url 'add_cart' %}" method="post" class="add-cart-form">
        {% csrf_token %}
        {{ item.update_quantity_form.quantity }}
        {{ item.update_quantity_form.update }}
        <input type="hidden" name="product_id" value="{{ item.product.id }}" class="product-id-input">
        <input type="submit" value="+" class="quantity__number-plus"> 
    </form>
</div>

views.py

修正add_to_cart中product_id错误减1的问题，确保能正确获取商品：

def add_to_cart(request):
    if request.method == 'POST':
        product_id = request.POST.get('product_id')
        # 移除无意义的减1操作，避免商品ID匹配错误
        product = Product.objects.get(id=int(product_id))
        cart = Cart(request)
        
        cart.add(product=product)
        cart_quantity = cart.get_total_len()
        return JsonResponse({'success': True, 'cart_quantity': cart_quantity})

def cart_remove(request):
    if request.method == 'POST':
        product_id = request.POST.get('product_id')
        product = Product.objects.get(id=int(product_id))
        cart = Cart(request)
        
        cart.remove(product) 
    cart_quantity = cart.get_total_len()
    return JsonResponse({'success': True, 'cart_quantity': cart_quantity})

scripts.js

使用类选择器绑定事件，通过$(this)获取当前表单上下文，查找对应的元素值：

$(function() {
    // 绑定加购按钮事件
    $(document).on('submit', '.add-cart-form', function(e){
        e.preventDefault();
        const $form = $(this);
        const $quantityInput = $form.closest('.quantity__row').find('.quantity-input');
        $.ajax({
            url: "{% url 'add_cart' %}",
            type: 'post',
            data: {
                product_id: $form.find('.product-id-input').val(),
                product_quantity: $quantityInput.val(),
                csrfmiddlewaretoken: $form.find('[name=csrfmiddlewaretoken]').val(),
            },
            success: function (response) {
                if (response.success) {
                    $quantityInput.val(response.cart_quantity); 
                    $('#modal__content').html('<p>Товар добавлен в корзину</p>').show();         
                } else {
                    console.log(response);
                }
            }
        });
    });

    // 绑定减购按钮事件
    $(document).on('submit', '.remove-cart-form', function(e){
        e.preventDefault();
        const $form = $(this);
        const $quantityInput = $form.closest('.quantity__row').find('.quantity-input');
        $.ajax({
            url: "{% url 'remove_cart' %}",
            type: 'post',
            data: {
                product_id: $form.find('.product-id-input').val(),
                product_quantity: $quantityInput.val(),
                csrfmiddlewaretoken: $form.find('[name=csrfmiddlewaretoken]').val(),
            },
            success: function (response) {
                if (response.success) {
                    $quantityInput.val(response.cart_quantity); 
                    $('#modal__content').html('<p>Товар убран из корзины!</p>').show();         
                } else {
                    $('#modal__content').html('<p>' + response + '</p>').show();
                }
            }
        });
    });
});

内容的提问来源于stack exchange，提问作者Артём