Question

我正在尝试使用此pug代码使用fetch将登录页面中的表单数据传递到登录页面：

form(id="form-login")
    input(type="text", name="email", value="", placeholder="Tu email")
    br
    input(type="password", name="password", value="", placeholder="Tu contraseña")
    br
    input(type="submit" value="Conectar")
script.
    const formLogin = document.querySelector('#form-login');
    const formData = new FormData(formLogin);

    formLogin.addEventListener('submit', function(event) {
        console.log('Form Data: ', formData);
        event.preventDefault();
        fetch('/signin', {
            method: 'POST',
            body: formData
        })
        .then(function(res) {
            res.json();
        })
        .then(function(data) {
            console.log(data)
            localStorage.setItem('token', data.token)
        })
    });

问题是一个空的req.body到达登录..跟踪后它给出了这个console.log

Form Data:  FormData {}

还有一个未定义的req.body。如果我对此脚本发表评论并通过添加action="/signin" and method="post"的表单发送，则会有效并打印答案，但调用storage.setItem({ token: <token> })会返回Uncaught (in promise) TypeError: Cannot read property 'token' of undefined 我想知道为什么这个脚本没有发送数据...无法弄清楚...所以任何帮助都会有很大的帮助。

登录功能：

function signIn (req, res) {    
    if (!req.body.email) return res.status(200).send({message: 'No recibo el usuario'})

    User.findOne({ email: req.body.email }, (err, user) => {

        if(err) return res.status(500).send({ message: err })
        if(!user) return res.status(404).render('login', { title: 'Intenta loguearte de nuevo' })

        user.comparePassword(req.body.password, (error, isMatch) => {
            if (error) return res.status(500).send({ message: error })
            if (!isMatch) {
                return res.redirect('login')
            } else {
                req.user = user
                res.status(200).send({
                    message: 'Te has logueado correctamente',
                    token: service.createToken(user)
                })
                //$window.localStorage.setItem({token: service.createToken(user)}); // NO WORKS
                return res.body = service.createToken(user) // TRYING THIS WITHOUT KNOWLEDGE ABOUT WHAT AM I DOING :O
            }
        })                 
    })
}

提前致谢。

**** **** EDIT 正如@MichałSałaciński建议的那样，首先发表评论.then res.json()....至少给出回应，但仍然没有看出这里有什么好处，为了正确学习并使事情变得更好，也希望有人能解释如何正确地做这样的事情

  Response: body : ReadableStream
locked : false
__proto__ : Object
bodyUsed :   false
headers :  Headers
__proto__  :  Headers
ok :  true
redirected :  false
status : 200
statusText: "OK"
type  :   "basic"

Answer 1

你应该移动＆＃34;新的FormData＆＃34;在里面＆＃34;发送＆＃34;事件监听器。此外，在类型=＆＃34;提交＆＃34;之后缺少逗号，但总的来说，这个问题与pug无关：）

form(id="form-login")
    input(type="text", name="email", value="", placeholder="Tu email")
    br
    input(type="password", name="password", value="", placeholder="Tu contraseña")
    br
    input(type="submit",value="Conectar")
script.
    const formLogin = document.querySelector('#form-login');

    formLogin.addEventListener('submit', function(event) {
    const formData = new FormData(formLogin);

        console.log('Form Data: ', formData);
        event.preventDefault();
        fetch('/signin', {
            method: 'POST',
            body: formData
        })
        .then(function(res) {
            res.json();
        })
        .then(function(data) {
            console.log(data)
            localStorage.setItem('token', data.token)
        })
    });

在node.js中使用pug在表单“post”之后发送空{}

1 个答案: