表单POST提交插入数据库提示成功但字段值全为NULL问题排查

插入全NULL值的问题是前后端请求解析配置不匹配导致的，另外你的前端提交成功判断逻辑也有问题，按以下步骤改就行：

核心错误1：前端POST请求未声明JSON数据格式 #

你把表单数据序列化成JSON字符串放在请求体里提交，但没给请求加Content-Type: application/json头，后端无法识别请求体的数据格式，根本不会把你发的JSON解析到req.body对象里，所有字段取出来都是undefined，最终插入数据库的就全是NULL。
另外注意：fetch API 只有网络故障、请求完全发不出去的时候才会触发catch分支，只要服务器返回了任何响应（哪怕是400、500错误）都会走then回调，所以你之前不管插入成功失败都会弹成功提示，属于逻辑漏洞。
修改后的前端提交代码：

fetch("http://localhost:4000/html/propertyform.html", {
    method: "POST",
    // 新增请求头，明确告知后端发送的是JSON格式数据
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(property),
})
.then(res => {
    // 先校验响应状态码，非2xx状态直接抛错进catch
    if (!res.ok) throw new Error("提交出错");
    return res.json();
})
.then(() => {
    window.alert("New property added!");
    location.href = "http://localhost:4000/html/owner.html"
})
.catch(err => {
    console.log(err);
    window.alert("提交失败，请检查输入后重试");
})

核心错误2：后端未配置JSON请求体解析中间件 #

如果你用Express作为服务端框架，默认不会自动解析JSON格式的请求体，必须手动开启内置的解析中间件，否则就算前端加了请求头，req.body还是会是空值。
找到你服务端初始化express的代码，在所有路由定义（就是你写的app.post(...)这类代码）的前面，加一行配置：

// 必须放在路由定义之前
app.use(express.json())

额外校验点 #

如果改完上面两处还是有字段为空，挨个核对你getElementById()里传的id值和HTML表单元素的id属性是否完全匹配：比如你代码里取街道字段用的id是street、省份是prov、公共交通字段是public，如果实际HTML里这些元素的id拼写不一致，取到的value就是空值，插入数据库也会异常。

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