jQuery设置start_date值后AJAX提交Django表单未携带该字段问题

start_date字段未提交是多处代码语法错误、逻辑错误叠加导致，具体问题点如下：

• 选择器语法错误：submit事件内获取表单字段时，id选择器漏写#前缀，比如$("id_start_date")无法匹配到对应DOM元素，且直接将jQuery对象传入提交参数，未调用.val()取实际字段值
• 日期格式不兼容：直接将JS原生new Date()对象赋值给input，默认转换的字符串格式不符合Django DateTimeField的校验规则，即使传到后端也会校验失败
• 禁用字段默认不提交：HTML规范中disabled状态的表单元素值不会被默认序列化提交，选中第二个单选按钮时给字段加的disabled属性会直接导致值被丢弃
• AJAX配置冲突：设置contentType: "application/json"但未将提交数据序列化为JSON字符串，Django的request.POST只能解析application/x-www-form-urlencoded格式的请求体，会导致参数读取异常
• 零散语法笔误：radio点击事件的function声明漏写括号、CSRF令牌取值调用.Val()（首字母大写，jQuery方法为小写.val()）、视图层序列化时自引用未传入实际模型实例、success回调多余执行JSON.parse等

前端JS修正（script.js） #

$('input:radio').click(function() {
  if ($(this).val() === '1') {
    // 格式化为Django可识别的YYYY-MM-DD HH:mm:ss格式
    const now = new Date();
    const pad = (num) => String(num).padStart(2, '0');
    const formatDate = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
    // 赋值前先取消字段禁用状态
    $('#id_start_date').prop('disabled', false).val(formatDate);
  } else if ($(this).val() === '0') {
    $('#id_start_date, #id_stop_date').prop('disabled', true);
  }
})

$("form").on("submit", function (e) {
  e.preventDefault();
  // 修正选择器，统一取字段实际值，手动收集禁用字段的值避免丢失
  const submitData = {
    csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val(),
    name: $("#id_name").val(),
    address: $("#id_address").val(),
    type: $("#id_type").val(),
    start_date: $("#id_start_date").val(),
    stop_date: $("#id_stop_date").val()
  };

  $.ajax({
    type: "POST",
    url: "{% url 'postAccount' %}",
    data: submitData,
    dataType: "json",
    success: function (response) {
      console.log(response.instance);
    }
  });
})

后端视图修正（views.py） #

from django.http import JsonResponse
from django.core import serializers
from .forms import AccountForm

def postAccount(request):
    if request.headers.get('x-requested-with') == 'XMLHttpRequest' and request.method == 'POST':
        form = AccountForm(request.POST)
        if form.is_valid():
            instance = form.save()
            # 修正序列化时的自引用错误，传入实际保存的模型实例
            ser_instance = serializers.serialize('json', [instance])
            return JsonResponse({"instance": ser_instance}, status=200)
        # 调试阶段可打印form.errors定位具体校验问题
    return JsonResponse({"error": "请求异常或表单校验失败"}, status=400)

• 提交前通过console.log(submitData)确认所有字段值格式正确，不要直接传入DOM对象
• 打开浏览器开发者工具-网络面板，查看POST请求的Form Data载荷，确认start_date字段值已正常携带
• 后端表单校验失败时打印form.errors，可快速定位字段格式、必填项等校验问题

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