Django中Ajax POST请求失效问题排查求助

问题核心原因 #

你遇到的request.POST拿不到数据，主要是这几个问题导致：

• 缺少Django强制要求的CSRF令牌，请求被后端拦截
• HTML里button嵌套a标签，引发事件处理冲突
• Ajax声明了dataType: 'json'，但后端返回的是重定向，类型不匹配
• 代码未做基本参数校验，存在空值报错风险

分步修复方案 #

1. 给Ajax请求添加CSRF令牌 #

Django会拦截不带CSRF令牌的POST请求，必须从页面的{% csrf_token %}生成的隐藏输入框中获取令牌，加入请求数据。

2. 修复HTML结构 #

button标签内嵌套a标签会导致事件冒泡和默认行为冲突，直接用button作为触发元素即可。

3. 适配Ajax请求的后端响应 #

Ajax请求期望JSON格式返回，但原后端返回重定向，需修改后端根据请求类型返回对应响应。

4. 优化JS与后端参数校验 #

统一变量使用，添加错误处理，避免空值引发异常。

修改后的完整代码 #

HTML表单 #

<form method="POST">
  {% csrf_token %}
  <ul>
    <li>
      <div class="form-group quantity-box">
        <label class="control-label">Quantity</label>
        <input
          class="form-control"
          id="quantity"
          value="0"
          min="0"
          max="20"
          type="number"
        />
      </div>
    </li>
  </ul>
  <div class="price-box-bar">
    <div class="cart-and-bay-btn">
      <a class="btn hvr-hover" data-fancybox-close="" href="#">Buy New</a>
      <button type="button" class="btn hvr-hover" id="qtyButton">Add to cart</button>
    </div>
  </div>
</form>

JS脚本 #

$('#qtyButton').click(function(e) {
  e.preventDefault();

  var qty = $('#quantity').val();
  var productId = {{ product.id }};

  $.ajax({
    type: "POST",
    url: "{% url 'addCart' %}",
    data: {
      "quantity": qty,
      "product_id": productId,
      "csrfmiddlewaretoken": $('input[name=csrfmiddlewaretoken]').val()
    },
    success: function(response) {
      window.location.href = response.redirect_url;
    },
    error: function(xhr) {
      console.error("请求失败:", xhr.responseText);
    }
  });
});

views.py代码 #

from django.http import JsonResponse
from django.shortcuts import redirect, get_object_or_404

def addCart(request):
    if request.method == 'POST':
        quantity = request.POST.get('quantity')
        product_id = request.POST.get('product_id')
        
        # 校验参数有效性
        if quantity and product_id:
            item = get_object_or_404(Product, id=product_id)
            # 仅创建购物车项时设置数量，避免覆盖已有数据
            Cart.objects.get_or_create(
                user=request.user,
                product=item,
                defaults={'quantity': quantity}
            )
            
            # 判断是否为Ajax请求，返回JSON跳转地址
            if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
                return JsonResponse({'redirect_url': request.META.get("HTTP_REFERER", "/")})
    
    return redirect(request.META.get("HTTP_REFERER", "/"))

关键修改说明 #

• CSRF令牌：通过$('input[name=csrfmiddlewaretoken]').val()获取页面令牌，这是后端能接收POST数据的核心前提。
• HTML结构：移除button内的a标签，设置type="button"避免触发表单默认提交，确保事件仅由Ajax处理。
• 后端适配：通过X-Requested-With头判断Ajax请求，返回JSON格式跳转地址，解决dataType不匹配问题。
• 参数校验：添加参数存在性校验，用get_object_or_404替代get避免无效ID报错，defaults参数防止覆盖已有购物车项的数量。

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