Django购物车AJAX添加商品成功但页面跳转至JSON响应页问题

1. 页面跳转至JSON响应页的原因及修复 #

页面跳转说明你的AJAX事件绑定未生效，表单执行了默认提交行为。核心问题是脚本加载顺序错误：

• 确保script.js在jQuery之后加载，否则绑定事件时jQuery尚未初始化，事件监听失效。
• 修改页面脚本引入顺序：

<!-- 先加载jQuery -->
<script src="{% static '/js/jquery-3.6.4.min.js' %}" type="text/javascript"></script>
<!-- 再加载自定义脚本 -->
<script src="{% static '/js/script.js' %}" type="text/javascript"></script>

• 同时检查script.js的静态文件路径是否正确，可通过浏览器开发者工具的「Network」标签确认文件是否成功加载（状态码200）。

2. views.py中product_id的优化方案 #

当前代码存在冗余的参数传递：URL已通过<int:product_id>传递商品ID，表单又通过hidden字段重复提交，完全没必要。推荐直接使用URL参数：

优化后的views.py #

def add_to_cart(request, product_id):
    if request.method == 'POST':
        quantity = 1
        user = request.user

        # 直接使用URL传递的product_id，无需从POST获取
        cart_item = CartItem.objects.create(product_id=product_id, quantity=quantity, user=user)
        # 注意：create()方法已自动将对象保存到数据库，无需额外调用save()

        return JsonResponse({'success': True})
    else:
        return JsonResponse({'success': False, 'error': '仅支持POST请求'}, status=400)

对应修改product_detail.html（移除冗余hidden字段） #

<form action="{% url 'add_to_cart' single_product.id %}" method="POST" id="add-to-cart-form">
{% csrf_token %}
<button type="submit" class="btn btn-primary">Add</button>
</form>

3. 控制台无输出的调试方法 #

在script.js中添加调试日志，确认事件是否被捕获、AJAX请求是否正常发送：

$(document).ready(function() {
  console.log('自定义脚本已加载');
  $('#add-to-cart-form').on('submit', function(event) {
    console.log('表单提交事件已触发');
    event.preventDefault();

    var url = $(this).attr('action');
    var data = $(this).serialize();
     
    $.ajax({
      url: url,
      method: 'POST',
      data: data,
      success: function(response) {
        console.log('AJAX请求成功:', response);
      },
      error: function(xhr, status, error) {
        console.log('AJAX请求失败:', error);
      }
    });
  });
});

• 打开浏览器开发者工具的「Console」标签，查看日志输出，定位问题节点。

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