如何用JavaScript发送JSON请求并在Flask接收？解决类型错误问题

云上老周

2026-8-10

问题分析与解决方案

问题根源

你的提交按钮是type="submit"，点击时会同时触发两个请求：一个是你通过fetch发送的JSON请求，另一个是表单默认的POST请求（Content-Type为application/x-www-form-urlencoded）。后端收到的是表单默认请求，因此抛出"Content-Type不是application/json"的错误。

具体修复步骤

1. 阻止表单默认提交行为

这是核心修复点，必须让浏览器只执行你编写的fetch请求，忽略表单默认提交：

方法一：修改按钮的onclick属性

直接在onclick末尾添加return false：

<input type="submit" id="submit_scenario_button" value="Dodaj Scenariusz" onclick="submitScenario(); return false;">

方法二：在JS函数内阻止默认事件

修改submitScenario函数，添加事件拦截逻辑：

function submitScenario(event) {
    event.preventDefault(); // 阻止表单默认提交
    // 原函数的步骤解析、数据构造代码...
}

同时更新按钮的onclick传递事件参数：

<input type="submit" id="submit_scenario_button" value="Dodaj Scenariusz" onclick="submitScenario(event);">

2. 修正fetch请求的URL（推荐）

当前用window.location.href + 'ed'拼接URL容易出错（比如当前URL带斜杠时会生成错误路径），建议直接复用表单的action属性获取正确后端地址：

// 替换原fetch的URL部分
const targetUrl = document.forms['scenarioForm'].action;
fetch(targetUrl, 
    {
        method: 'POST',
        headers: {
            'Content-Type':'application/json',
        },
        body: dataJson,
    }
);

3. 包含表单隐藏字段数据（可选）

如果需要将表单内的scenario_name、expected等隐藏字段也发送给后端，需在构造data对象时补充这些内容：

// 构造完步骤数据后添加：
data.scenario_name = document.getElementById('scenario_name').value;
data.expected = document.getElementById('expected').value;
data.author_id = document.getElementById('author_id').value;
data.steps_to_show = document.getElementById('steps_to_show').value;

// 再转为JSON字符串
var dataJson = JSON.stringify(data);

验证修复效果

修改完成后，点击提交按钮：

浏览器不会刷新页面（说明默认提交已被阻止）
打开开发者工具的Network面板，查看POST请求的Content-Type是否为application/json
检查请求体是否包含预期的完整JSON数据

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