我正在尝试使用带有此 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 到达 signin.. 跟踪后它给出了这个 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
}
})
})
}
提前致谢。
****编辑****
正如@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"
最佳答案
所以我遇到了同样的问题,我的哈巴狗表单的 POST 请求发回了一个空的 {}
作为 req.body
对象。该代码是一个简单的创建操作,使用这些:
bookController.js
exports.createBookForm = (req,res) => {
res.render("create_book_form", { title: "Add A New Book"})
}
exports.createBook = (req,res) => {
const reqFields = ["title", "author"];
for (let i = 0; i < reqFields.length; i++) {
const field = reqFields[i];
if (!field in req.body) {
const message = `Missing ${field} in the request body`;
console.log(message)
return res.status(400).send(message)
}
}
Book
.create({
title: req.body.title,
author: req.body.author,
summary: req.body.summary
})
.then((book) => {
res.status(201).json(book.serialize())
})
.catch(err => {
console.log(err);
})
}
创建书籍表单:
block content
h1 Add a Book
h3 Do use real details. Otherwise, what's the point?
form(method="POST" action="/books")
div.form-group
label(for="title") Title:
input#title.form-control(type="text", placeholder="Small Gods" name="title")
label(for="author") Author:
input#author.form-control(type="text", placeholder="Terry Pratchett" name="author")
label(for="summary") Summary:
textarea#summary.form-control(type="text", placeholder="God is turtle, world is flat" name="summary")
div.form-group
button.btn.btn-primary(type="submit" role="submit") Add Book
最终解决了让实际的 req.body 出现在 POST 操作中的问题是添加(在 server.js 中)
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
让我知道这是否适合您。我花了几个小时才得出这个结论,我讨厌看到问题得不到解答。
关于javascript - 在 node.js 中使用哈巴狗在表单 "post"之后发送空 {},我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44080316/