Django开发电商网站时如何识别多商品对应的被点击加入购物车按钮

你这个需求有两种实现路径，不一定非要用JavaScript，新手可以先从更简单的纯Django模板方案入门：

方案1：无需JavaScript（纯Django表单实现，页面会刷新） #

原理是给每个商品单独配一个提交表单，点击按钮时自动把对应商品ID提交给后端，不需要写任何前端脚本：
修改你的模板代码如下：

<div class="row">
    {% for product in products %}
        <div class="col-lg-4">
        <img alt="" class="thumbnail" src="{{ product.images.all.0.image.url }}">
            <div class="box-element product">
                <h5><strong>{{ product.name }}</strong></h5>
                <hr>
                <!-- 新增每个商品对应的表单 -->
                <form action="{% url 'add_to_cart' %}" method="post" style="display: inline;">
                    {% csrf_token %}
                    <input type="hidden" name="product_id" value="{{ product.id }}">
                    <button type="submit" class="btn btn-outline-secondary add-btn"> Add to cart</button>
                </form>
                <a class="btn btn-outline-success" href="{% url 'detail' product.id %}"> View</a>
                <h4 style=" float: right"><strong>{{ product.price }}</strong></h4>
            </div>
        </div>
    {% endfor %}
</div>

后端对应新增add_to_cart视图，接收product_id参数后完成购物车逻辑即可，表单提交完成后可以重定向回商品列表页。

方案2：使用JavaScript实现（无刷新体验更好） #

如果想要点击按钮后不刷新页面，就需要用JS监听点击事件，发送AJAX请求给后端：

第一步：修改模板按钮，添加自定义属性存储商品ID #

<!-- 按钮部分修改为 -->
<button class="btn btn-outline-secondary add-btn" data-product-id="{{ product.id }}"> Add to cart</button>

第二步：在模板底部添加JS监听逻辑 #

// 用jQuery实现示例，也可以替换为原生JS写法
$('.add-btn').click(function() {
    const productId = $(this).data('product-id');
    $.post({
        url: "{% url 'add_to_cart' %}",
        data: {
            'product_id': productId,
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        },
        success: function(res) {
            // 成功后自定义逻辑，比如更新购物车角标数量
            alert('商品已加入购物车');
        }
    })
})

第三步：后端视图适配AJAX请求 #

返回JSON格式的响应即可，不需要做页面重定向。

内容的提问来源于stack exchange，提问作者Menna T-Allah Magdy