req.body 未使用 JQuery 定义

Question

我想使用 express 和 jquery 实现 AJAX。

index.ejs

<script>
const increment = () => {
    let value = parseInt(document.getElementById('number').value);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
    console.log(document.getElementById('number').value) <== returns correct number
}
</script>
<button type="button" onclick='increment()'>add</button>
<form action="/dash" method="POST" id="mon">
    <input id="number" name='number' value=<%=money %>>
    <button type="submit">submit</button>
</form>

index.js

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) <== also returns correct number
    res.redirect('/dash')
})

而且，当单独（没有jquery）时，它工作得很好，它返回正确的数字并将其保存到db。

当我将 jquery 代码添加到脚本时，就会出现问题。

index.ejs script标签中的index.ejs代码：

$(document).ready(function () {
        $("form#mon").on('submit', function (e) {
            e.preventDefault();
            var data = $('input[name=number]').val();
            console.log(data)
            $.ajax({
                type: 'post',
                url: 'dash',
                data: data,
                dataType: 'text',
            })
                .done(function (data) {
                    var num = $('input[name=number]').val();
                    console.log(num)
                    $('input[name=number]').val(num);
                });
        });
    });

而且基本上它也可以，单击按钮时不会刷新页面，但是现在index.js中的console.log(req.body.number)返回未定义，并且不会保存在db中。

谢谢您的回答。

Answer 1

表单数据由一系列键=值对组成。

你有：

var data = $('input[name=number]').val();

因此，您发送的数据是一个没有键的值。

你需要：

var data = {
    number: $('input[name=number]').val();
};