Django中AJAX调用无法触发视图，但表单提交可行，原因何在？

这问题我碰到过好几次，表单能正常提交但AJAX打不通，大概率是细节没处理到位，咱们一个个排查：

• CSRF令牌缺失（最常见原因）
  Django默认对所有POST请求做CSRF保护，你的表单里如果加了{% csrf_token %}，模板会自动生成隐藏的令牌字段，但AJAX请求不会自动带上这个令牌。你得手动把它加到请求里：

  1. 先从页面获取CSRF令牌的值：

     const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
     

  2. 在AJAX请求里通过请求头或者POST参数传递：

     fetch('{% url "product:add-to-cart" product_id=product.pk slug=product.get_slug hotel=1 shuttle=1 %}', {
       method: 'POST',
       headers: {
         'X-CSRFToken': csrfToken,
         'Content-Type': 'application/x-www-form-urlencoded',
       },
       body: new FormData(document.getElementById('product-form'))
     })
     

• AJAX请求URL不符合URLconf规则
  你的URL路由要求四个参数必须严格匹配格式：

  • slug：只能是小写字母、数字、下划线、短横线（[a-z0-9-_]+）
  • product_id：纯数字
  • hotel/shuttle：只能是0或1
    你可以在浏览器控制台里打印AJAX的请求URL，对比检查：
  • product.get_slug返回的slug有没有大写字母或其他非法字符？
  • product.pk是不是确实是数字类型？
  • hotel和shuttle参数有没有传成字符串（比如"1"而不是1）或者其他值？

• 请求方法不匹配
  你的表单用的是method="post"，如果AJAX请求用了GET方法，而视图里又加了@require_POST装饰器，那肯定会被拒绝。检查你的AJAX代码里的method设置，确保是POST。

• 请求数据格式不兼容
  如果AJAX发送的是JSON格式数据，但视图里还是用request.POST来获取参数，就会拿不到数据导致逻辑出错。解决办法二选一：

  • 把AJAX的Content-Type设为application/x-www-form-urlencoded，或者用FormData来传递数据
  • 在视图里用json.loads(request.body)来解析JSON格式的请求体

• 视图里的AJAX检测逻辑过时
  如果你在视图里用了request.is_ajax()来判断是否是AJAX请求，注意Django 3.1之后这个方法已经被弃用了，应该改用：

  if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
      # 处理AJAX请求
  

  旧的is_ajax()会导致AJAX请求被误判，从而无法触发正确的逻辑。

• 按钮事件未阻止默认行为
  如果你的触发按钮是表单内的提交按钮，点击时会同时触发表单的默认提交行为，导致AJAX请求被中断。这种情况下，要在点击事件里加上event.preventDefault()：

  document.getElementById('your-button-id').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止表单默认提交
    // 这里写AJAX请求代码
  });
  

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