Django表单通过jQuery AJAX提交时textarea字段提交失败问题求助

问题根因说明 #

你的textarea字段已经完成正常序列化并成功提交到Django服务端，从你提供的Django服务端QueryDict日志可以明确看到summary字段的完整内容，400 Bad Request报错和前端序列化逻辑无关，是后端校验规则不匹配导致的问题。

排查步骤 #

1. 先查看后端返回的具体错误详情
   你当前的AJAX错误回调直接刷新页面，无法捕获具体错误信息，先修改error回调代码打印错误：

error:function(xhr){
    // 打印后端返回的具体校验错误，可直接定位是哪个字段不符合要求
    console.log('接口错误详情：', xhr.responseJSON || xhr.responseText);
    alert("Maintenance Records Not Added!");
    // 先注释刷新逻辑，方便查看控制台输出
    // location.reload();
}

2. 常见报错场景及解决方案

• 字段长度超限：检查Django模型/表单/序列化器中summary字段的max_length限制，你当前提交的测试文本字符数较多，如果配置的长度阈值小于实际提交的字符数就会触发400错误，调整长度限制即可。
• 字段名不匹配：确认Django API期望接收的详情字段名是否为summary，如果后台Django表单/序列化器中该字段的命名是details、maintenance_summary等其他名称，就会出现字段缺失校验报错，修改前端textarea的name属性和后端保持一致即可。
• 接口仅支持JSON格式提交：如果你用的是Django REST Framework搭建的API，且配置了仅接受JSON格式的解析器，你当前提交的表单编码格式就会被拒绝，修改AJAX配置提交JSON格式数据即可：

$(function() { 
    $('#addMaintenanceRecordsForm').on('submit', function(e) { 
        e.preventDefault();
        let url = "http://127.0.0.1:8000/api/maintenance/add/";
        // 把表单数据组装为JSON格式
        let formData = {};
        $(this).serializeArray().forEach(item => {
            formData[item.name] = item.value;
        });
        $.ajax({
            type : 'POST',
            url : url,
            data : JSON.stringify(formData),
            contentType: "application/json",
            dataType: "json",
            // 传递CSRFToken到请求头
            headers: {
                "X-CSRFToken": $("input[name='csrfmiddlewaretoken']").val()
            },
            success: function(data){
                alert("New Maintenance Records Added!");
                location.reload();
            },
            error:function(xhr){
                console.log(xhr.responseJSON);
                alert("Maintenance Records Not Added!");
            }
        });
    });
});

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