使用Django实现添加购物车后停留在当前商品页面的方法

方法1：AJAX异步提交（推荐） #

完全避免页面刷新，既解决回顶问题，还能优化交互体验。

1. 给表单添加类名，方便JS选择：

<form class="add-to-cart-form" action="{% url 'cart:AddCart' %}" method="POST">{% csrf_token %}
  <input hidden type="text" name="product" value="{{i.id}}">
  <button class="main-btn cart cart-btn" style="padding: 5px 32px">Add <i class="fa-solid fa-cart-shopping"></i></button>
</form>

2. 添加原生JS代码（放在页面底部或外部JS文件）：

document.querySelectorAll('.add-to-cart-form').forEach(form => {
  form.addEventListener('submit', e => {
    e.preventDefault();
    const csrfToken = form.querySelector('[name=csrfmiddlewaretoken]').value;
    const productId = form.querySelector('[name=product]').value;

    fetch(form.action, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-CSRFToken': csrfToken
      },
      body: `product=${productId}`
    })
    .then(res => res.json())
    .then(data => {
      alert('商品已添加到购物车');
      // 这里可额外处理，比如更新页面购物车数量显示
    })
    .catch(err => {
      console.error('添加失败:', err);
      alert('添加购物车失败，请重试');
    });
  });
});

3. 后端视图调整（可选）：
   处理完添加逻辑后返回JSON响应：

from django.http import JsonResponse

def add_cart(request):
    # 原有添加购物车逻辑
    # ...

    return JsonResponse({'status': 'success', 'msg': '添加成功'})

方法2：锚点定位（保留页面刷新） #

如果需要保留页面刷新，通过锚点让页面自动滚动回当前商品位置：

1. 给商品容器加锚点ID，表单里传入锚点参数：

<!-- 商品项容器 -->
<div id="product-{{i.id}}" class="product-item">
  <!-- 商品内容 -->
  <form action="{% url 'cart:AddCart' %}" method="POST">{% csrf_token %}
    <input hidden type="text" name="product" value="{{i.id}}">
    <input hidden type="text" name="anchor" value="product-{{i.id}}">
    <button class="main-btn cart cart-btn" style="padding: 5px 32px">Add <i class="fa-solid fa-cart-shopping"></i></button>
  </form>
</div>

2. 后端视图重定向时带上锚点：

from django.shortcuts import redirect

def add_cart(request):
    # 原有添加购物车逻辑
    # ...

    anchor = request.POST.get('anchor')
    # 替换为你的商品列表页面URL
    return redirect(f'/your-product-list-url/#{anchor}')

内容的提问来源于stack exchange，提问作者Divyrajsinh 1213