Django Ajax请求返回400错误，如何在Ajax中显示提示消息？

一、400 Bad Request 错误排查与修复 #

请求能到达后端else分支但返回400，通常和响应格式不合法、CSRF验证或参数匹配有关，以下是具体修复步骤：

• 强制后端返回合法JSON响应
  后端仅打印信息无法满足前端dataType: "json"的解析要求，必须返回标准JSON格式。修改后端视图的else分支：

  from django.http import JsonResponse
  
  def Check_pending_request_approve_timesheet(request):
      # 业务逻辑判断
      if 审批条件满足:
          return JsonResponse({'status': 'success'})
      else:
          print("进入else分支")
          # 必须返回JSON，状态码设为200避免触发前端error回调
          return JsonResponse({'status': 'error', 'message': '存在未处理的待审批请求'}, status=200)
  

• 确保CSRF令牌验证通过
  模板渲染的{{ csrf_token }}可能在动态场景下失效，改用从Cookie获取令牌的方式更可靠：

  // 定义获取CSRF令牌的工具函数
  function getCSRFToken() {
      let token = null;
      const cookies = document.cookie.split(';');
      for (let cookie of cookies) {
          const [key, value] = cookie.trim().split('=');
          if (key === 'csrftoken') {
              token = decodeURIComponent(value);
              break;
          }
      }
      return token;
  }
  
  // 修改Ajax请求的CSRF传递方式
  $.ajax({
      url: "{% url 'user:Check_pending_request_approve_timesheet' %}",
      headers: { 'X-CSRFToken': getCSRFToken() }, // 通过请求头传递
      data: { "year_month": yearMonth, "emp_id": emp_id },
      dataType: "json",
      type: "POST",
      // ... 其他回调逻辑
  });
  

• 校验参数名匹配性
  确认后端视图接收的参数名和前端传递的year_month、emp_id完全一致（包括大小写、拼写），比如后端如果写request.POST.get('yearMonth')就会取不到值，导致逻辑异常。

• 查看网络请求详情定位问题
  在浏览器控制台「网络」标签下，查看该POST请求的：

  • Form Data：确认参数是否正确传递
  • Response：查看后端返回的具体内容，判断是响应格式错误还是业务逻辑提示

二、Ajax中显示简单提示消息的几种方式 #

1. 用Bootbox（已有依赖） #

直接利用代码中已引入的bootbox组件：

// 成功提示
bootbox.alert("工时表已审批通过");
// 错误提示
bootbox.alert("请先处理待审批请求");

2. 用Toastify（已有依赖） #

封装成复用函数，方便调用：

function showToast(message, isError = false) {
    Toastify({
        text: message,
        duration: 3000,
        gravity: 'bottom',
        style: { background: isError ? '#e74c3c' : '#2ecc71' }
    }).showToast();
}

// 调用示例
showToast("工时表已审批");
showToast("操作失败，请重试", true);

3. 自定义无依赖提示 #

不想用第三方库的话，手动创建弹窗：

function showSimpleAlert(message, isError = false) {
    const alertDiv = $('<div class="custom-alert">' + message + '</div>');
    const bgColor = isError ? '#e74c3c' : '#2ecc71';
    alertDiv.css({
        position: 'fixed',
        bottom: '20px',
        left: '50%',
        transform: 'translateX(-50%)',
        padding: '12px 24px',
        backgroundColor: bgColor,
        color: '#fff',
        borderRadius: '4px',
        zIndex: 9999,
        boxShadow: '0 2px 8px rgba(0,0,0,0.2)'
    });
    $('body').append(alertDiv);
    // 3秒后自动消失
    setTimeout(() => alertDiv.fadeOut(300, () => alertDiv.remove()), 3000);
}

// 调用示例
showSimpleAlert("操作成功");
showSimpleAlert("参数错误，请检查", true);

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