为何设置enctype='application/json'后CONTENT_TYPE仍为application/x-www-form-urlencoded？如何JSON提交表单？

为什么CONTENT_TYPE还是application/x-www-form-urlencoded？ #

HTML标准对<form>的enctype属性有严格限制，仅支持三个合法值：

• application/x-www-form-urlencoded（默认值）
• multipart/form-data（用于文件上传场景）
• text/plain（纯文本格式提交）

当你设置enctype='application/json'时，浏览器无法识别这个非标准值，会自动忽略该设置并使用默认的application/x-www-form-urlencoded，因此请求的CONTENT_TYPE始终是默认类型。

如何将表单数据以JSON格式发送到服务器？ #

原生HTML表单不支持直接发送JSON数据，需要通过JavaScript拦截表单提交事件，手动处理数据并发送请求：

1. 修改HTML表单（添加ID方便JS获取） #

<form id="json-submit-form" action="{% url 'xxx' %}" method="post">
    {% csrf_token %}
    <input type='number' name='bottle-on-wall' value='1'>
    <input type='number' name='bottle-on-wall' value='2'>
    <input type='number' name='bottle-on-wall' value='3'>
    <button type="submit">send</button>
</form>

2. 添加JavaScript处理逻辑 #

document.getElementById('json-submit-form').addEventListener('submit', async function(e) {
    // 阻止浏览器默认的表单提交行为
    e.preventDefault();

    // 获取Django的CSRF令牌
    const csrfToken = this.querySelector('[name="csrfmiddlewaretoken"]').value;

    // 收集表单数据，处理同名输入为数组
    const formData = new FormData(this);
    const payload = {};
    for (const [key, value] of formData.entries()) {
        if (payload[key]) {
            if (!Array.isArray(payload[key])) {
                payload[key] = [payload[key]];
            }
            payload[key].push(value);
        } else {
            payload[key] = value;
        }
    }

    // 将数据转为JSON字符串
    const jsonPayload = JSON.stringify(payload);

    // 发送POST请求
    try {
        const response = await fetch(this.action, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: jsonPayload
        });

        // 根据实际需求处理响应
        const responseData = await response.json();
        console.log('请求成功:', responseData);
    } catch (error) {
        console.error('请求失败:', error);
    }
});

最终发送的JSON格式示例 #

{
    "bottle-on-wall": ["1", "2", "3"],
    "csrfmiddlewaretoken": "你的CSRF令牌内容"
}

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