Express结合jQuery实现AJAX提交表单时req.body.number返回undefined如何解决

AJAX请求的data参数仅传递了输入框的纯数值，没有携带number字段名，Express无法从req.body中解析到对应的number属性，因此返回undefined。
同时原有路由的res.redirect对AJAX请求无效，前端不会触发页面跳转。

1. 修改前端jQuery AJAX请求参数 #

将data调整为键值对格式，和表单提交的字段名保持一致，同时建议将请求路径改为绝对路径避免解析错误：

$(document).ready(function () {
    $("form#mon").on('submit', function (e) {
        e.preventDefault();
        var numberVal = $('input[name=number]').val();
        $.ajax({
            type: 'post',
            url: '/dash',
            data: { number: numberVal },
            dataType: 'json',
        })
        .done(function (res) {
            console.log('更新成功，当前数值为：', res.money);
            // 不需要手动重新赋值输入框，本地值本来就是最新的，如果需要同步后端返回值也可以开启下方代码
            // $('input[name=number]').val(res.money);
        })
        .fail(function (err) {
            console.error('提交失败：', err);
        });
    });
});

2. 调整后端路由响应逻辑 #

AJAX请求不需要页面重定向，改为返回JSON格式的操作结果即可：

router.post('/dash', isLogin, async (req, res) => {
    const num = req.body.number;
    const filter = {username: req.user.username};
    const update = {money: num};
    await User.updateOne(filter, update);
    console.log(num);
    res.json({ status: 'success', money: num });
})

修改后即可正常拿到req.body.number的值，完成数据更新。

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