jQuery AJAX POST提交JSON数据时后端接收为空问题求助

你的请求失效是前后端共3处配置错误导致的，按下面步骤修改即可正常运行：

前端代码修正 #

你声明了请求头Content-Type: application/json，但直接把JS对象传给data字段时，jQuery默认会把对象转成form-urlencoded格式的键值字符串，和声明的请求类型不匹配，后端无法识别为JSON数据。另外你重复写了两次dataType配置，多余的可以删掉。
修正后的请求代码：

function Test_Button_Pressed() {
    $.ajax({
        type: "POST",
        url: "/test",
        dataType: "json",
        // 必须手动将JS对象序列化为JSON字符串再发送
        data: JSON.stringify({Name: "Rikus", Value: 123}),
        contentType: "application/json",
        success: function (result) {
            console.log(result);
        },
        error: function (err) {
            console.log("Error: ", err);
        }
    });
}

后端代码修正 #

1. 补充JSON解析中间件 #

从代码结构判断你用的是Express框架，Express不会默认解析JSON格式的请求体，必须提前注册对应中间件，否则req.body会一直是空对象：

• 如果你用的是Express 4.16及以上版本，直接在注册路由前加内置中间件即可：

// 注意这行必须写在所有PanelApp.post、PanelApp.get路由的前面
PanelApp.use(express.json());

• 如果你用的是更低版本的Express，先执行npm i body-parser安装依赖，再注册中间件：

const bodyParser = require('body-parser');
// 同样要放在路由注册之前
PanelApp.use(bodyParser.json());

2. 返回合法JSON格式响应 #

你当前接口返回的是纯字符串"Done"，但前端dataType: "json"配置要求接口返回JSON格式内容，否则会触发AJAX的error回调，把返回逻辑改成：

PanelApp.post('/test', (req, res) => {
    console.log(req.params);
    console.log(req.body); // 修改完成后这里就能正常拿到前端传的{Name: "Rikus", Value: 123}
    res.json({msg: "Done"});
});

额外排查点 #

• 确认独立的JS文件已经在HTML中通过<script>标签正确引入，浏览器控制台没有报JS文件404的错误
• 如果前后端服务端口、域名不一致，需要后端配置跨域中间件，否则请求会被浏览器拦截

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