Django中Ajax始终提交{% for %}循环生成的最后一个商品ID至视图的问题

你遇到的核心问题是HTML中id属性的唯一性限制：在{% for %}循环里，你给所有"Add to Cart"按钮都设置了同一个id="add-to-cart"，但HTML规范要求id必须是页面唯一的。当你用$('#add-to-cart').val()获取值时，jQuery只会找到页面中最后一个拥有这个id的元素，所以不管点击哪个按钮，都会提交最后一个商品的ID。

只需要调整前端代码，把唯一id换成可重复的class，然后通过当前点击的元素获取对应商品ID即可：

1. 修改HTML按钮属性 #

将按钮的id="add-to-cart"替换为class="add-to-cart"，保留value="{{ product.id }}"不变：

<button class="btn btn-outline-success add-to-cart" value="{{ product.id }}">Add to Cart</button>

2. 更新Ajax事件绑定与取值逻辑 #

把事件绑定到class选择器上，并用$(this)获取当前点击按钮的value（即对应商品ID），而不是通过id选择器全局查找：

$(document).on('click', '.add-to-cart', function(e) {
 e.preventDefault();
 // 获取当前点击按钮对应的商品ID
 const productId = $(this).val();
 $.ajax({
 type: 'POST',
 url: '{% url "add_to_cart" %}',
 data: {
 productid: productId,
 csrfmiddlewaretoken: '{{ csrf_token }}',
 action: 'post'
 },
 success: function(json){
 // 可选：添加成功后的交互提示，比如更新购物车计数
 console.log('成功添加商品ID ' + json.id + ' 到购物车');
 },
 error: function(xhr, errmsg, err) {
 console.error('添加购物车失败:', errmsg);
 }
 });
})

3. 视图代码验证（可选） #

你的视图逻辑本身没有问题——详情页能正常工作就是证明。现在前端传递正确的productid后，视图就能拿到对应商品的ID完成添加操作了。

• 可以在success回调里更新页面上的购物车计数或总价，提升用户体验；
• 如果商品存在缺货状态，建议在前端点击按钮时先判断product.in_stock的值，避免发起无效的Ajax请求。

内容的提问来源于stack exchange，提问作者Bello Shehu Ango