英文:
Node.JS - Express request returns undefined when when submitting a post request from a form
问题
当我尝试使用Node.JS/Express获取HTML表单时，似乎会返回未定义的值，因为req.body返回一个空对象。
Node
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = '3000';
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json());
app.use(express.static('public'))
app.get('/', function (req, res) {
res.sendFile(__dirname + '/signup.html')
});
app.post('/', function (req, res) {
const FirstName = req.body.firstName
const LastName = req.body.lastName
console.log(FirstName)
console.log(LastName)
});
app.listen(port, function (err) {
if (err) console.log(err)
console.log('Local port started at', port)
});
HTML
<form action="/" method="post">
<label for="firstName">First Name</label>
<input class="form-grid__item--field" type="text" id="firstName" placeholder="First Name">
<label for="lastName">Last Name</label>
<input class="form-grid__item--field" type="text" id="lastName" placeholder="Last Name">
<label for="subscriberEmail">Email</label>
<input class="form-grid__item--field" type="text" id="subscriberEmail" placeholder="Email">
<input type="submit" class="form__button" value="Sign Me Up!">
</form>
多次重新格式化了代码。检查了HTML表单以确保action和method属性设置正确。查看了Body Parser的文档以尝试获得更多上下文，但没有发现问题。
英文:
When I try to get an HTML form from using Node.JS/Express it seems to return a undefined value as the req.body returns an empty object.
Node
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = '3000'
app.use(bodyParser.urlencoded({ extended: true}))
app.use(bodyParser.json());
app.use(express.static('public'))
app.get('/',function(req, res) {
res.sendFile( __dirname + '/signup.html')
});
app.post('/', function(req, res) {
const FirstName = req.body.firstName
const LastName = req.body.lastName
console.log(FirstName)
console.log(LastName)
});
app.listen(port, function(err) {
if (err) console.log(err)
console.log('Local port started at', port)
});
HTML
<form action="/" method="post"\>
<label for="firstName"\>First Name\</label\>
<input class="form-grid__item--field" type="text" id="firstName" placeholder="First Name"\>
<label for="lastName">Last Name</label>
<input class="form-grid__item--field" type="text" id="lastName" placeholder="Last Name">
<label for="subscriberEmail">Email</label>
<input class="form-grid__item--field" type="text" id="subscriberEmail" placeholder="Email">
<input type="submit" class="form__button" value="Sign Me Up!">
</form>
Reformatted the code several times. Looked into the html form to ensure the action and methods where in place. When over body parser documentation to try and get more context but nothing.
答案1
得分: 0
<input class="form-grid__item--field" type="text" id="subscriberEmail" name="subscriberEmail" placeholder="Email">
“input”标签内的“id”字段用于在DOM中引用元素。
为了将输入作为请求中的字段传递，您必须给它添加属性“name”。
英文:
The id field inside input label is used for referencing the element in the DOM.
In order to pass the input as a field in the request you must give it attribute name
<input class="form-grid__item--field" type="text" id="subscriberEmail" name="subscriberEmail" placeholder="Email">
答案2
得分: 0
req.body 搜索表单中的 name 属性。添加 name 属性，然后通过 req.body.theNameOfTheAttribute 访问它们。
<form action="/" method="post">
<label for="firstName">名字</label>
<input class="form-grid__item--field" type="text" id="firstName" placeholder="名字">
<label for="lastName">姓氏</label>
<input class="form-grid__item--field" type="text" id="lastName" placeholder="姓氏">
<label for="subscriberEmail">电子邮件</label>
<input class="form-grid__item--field" type="text" id="subscriberEmail" placeholder="电子邮件">
<input type="submit" class="form__button" value="注册">
</form>
英文:
The req.body searches for the name attribute in your form. Add the name attribute and then access them via req.body.theNameOfTheAttribute
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<form action="/" method="post"\>
<label for="firstName"\>First Name\</label\>
<input class="form-grid__item--field" type="text" id="firstName" placeholder="First Name"\>
<label for="lastName">Last Name</label>
<input class="form-grid__item--field" type="text" id="lastName" placeholder="Last Name">
<label for="subscriberEmail">Email</label>
<input class="form-grid__item--field" type="text" id="subscriberEmail" placeholder="Email">
<input type="submit" class="form__button" value="Sign Me Up!">
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论