在表单“发布”后发送空{}在node.js中有帕格 [英] Sending empty {} after form "post" with pug in node.js
问题描述
我试图从登录页面传递表单数据到postin页面， form（id =form-login）
input（type =text，name =email，value =，placeholder =Tu email）
br
input （type =submitvalue =Conectar）$ b $（$）
$ b（type =password，name =password，value =，placeholder =Tucontraseña b脚本。
const formLogin = document.querySelector（'＃form-login'）;
const formData = new FormData（formLogin）;
$ b $ 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
表单数据：FormData {}
以及一个未定义的req.body。
如果我评论这个脚本，并通过添加 action =/ signin和method =post的形式发送它，它就会起作用并且打印答案，但是调用 storage.setItem（{token：< token>））返回一个 Uncaught（在promise中）TypeError：无法读取属性'token'未定义
我想知道为什么这个脚本没有发送数据...不知道...所以任何帮助都会大大降低。
登录函数：
pre $ 函数signIn（req，res）{
if（！ （{email：req.body.email}）返回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）=> {
如果（错误）返回res.status（500）.send（{message：error}）
if（！isMatch）{
return res.redirect（'login'）
} else {
req.user = user
res.status（200）.send（{
message：'Te have logueado correctamente'，
token：service.createToken（user）
}）
//$window.localStorage.setItem ({token：service.createToken（user）}）; //没有作品
返回res.body = service.createToken（用户）//尝试此操作而无需知道我正在做什么：O
}
}）
}）
}
预先致谢。
**** EDIT ****
As @MichałSałaciński建议，先评论。然后res.json（）.... 至少给出一个回应，但仍然不会忽视这里发生的事情，为了正确地学习和改善事情，也希望有人能够解释如何正确地做这样的事情。
响应：body：ReadableStream
locked：false
__proto__：Object
bodyUsed：false
标题：标题
__proto__：标题
ok：true
重定向：false
status：200
statusText：OK
类型：basic
您应该在发送事件侦听器中移动新的FormData。同样，在type =submit后面缺少逗号，但总的来说，这个问题与pug无关：）
form （id =form-login）
input（type =text，name =email，value =，placeholder =Tu email）
br
input（ type =password，name =password，value =，placeholder =Tucontraseña）
br
input（type =submit，value =Conectar）
脚本。
const formLogin = document.querySelector（'＃form-login'）;
$ b $ formLogin.addEventListener（'submit'，function（event）{
const formData = new FormData（formLogin）;
$ b $ 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）
}）
}）;
I'm trying to pass form data from login page to signin page via post using fetch with this pug code:
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)
})
});
The problem is an empty req.body reaching to signin.. After trace it gives this console.log
Form Data: FormData {}
and also an undefined req.body.
If I comment this script and just send it through form adding action="/signin" and method="post", it works and the answer is printed, but calling storage.setItem({ token: <token> }) returns an Uncaught (in promise) TypeError: Cannot read property 'token' of undefined
I'm wondering why this script is not sending the data... can't figure out... so any help will be much apreciated.
Signin function:
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
}
})
})
}
Thanks in advance.
****EDIT****
As @MichałSałaciński suggest, commenting first .then res.json().... At least gives a response, but still don't undestand what's hapenning here and in order to learn properly and make things better, also hope someone can explain how to correctly do stuff like this.
Response: body : ReadableStream
locked : false
__proto__ : Object
bodyUsed : false
headers : Headers
__proto__ : Headers
ok : true
redirected : false
status : 200
statusText: "OK"
type : "basic"
You should move "new FormData" inside "send" event listener. Also, there's missing comma after type="submit", but overall, the problem got nothing to do with 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中有帕格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
