Express.js req.body.variableName 返回未定义

Question

I'm working on a website using Node.js with Express and EJS as the templating engine, and I'm having trouble getting data from the form on the site.我正在使用 Node.js 和 Express 和 EJS 作为模板引擎的网站上工作，但我无法从网站上的表单获取数据。 Here is my code:这是我的代码：

app.js应用程序.js

//app.js
'use strict';
var debug = require('debug');
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var session = require('express-session');
var app = express();
const { getSearchPage, search } = require('./routes/search');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
       
app.set('port', process.env.PORT || 3000);
var server = app.listen(app.get('port'), function () {
  debug('Express server listening on port ' + server.address().port);
        });
 
app.get('/search', getSearchPage);
app.post('/search', search);        
        
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs'); 
      
app.use(logger('dev'));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

search.js搜索.js

//search.js (in routes folder)
module.exports = {
  getSearchPage: (req, res) => {
    res.render('search.ejs');
  },
  search: (req, res) => {
    var artist = req.body.searchArtist;
    var song = req.body.searchSong;
    var genre = req.body.searchGenre;
    var decade = req.body.searchDecade;
    console.log("The variables from the page: ", req.body, artist, song, genre, decade); //logs "{} undefined undefined undefined undefined"
    if (song) {
      //query the database and return some results
    }
    res.render('search.ejs', { outputArray: outputArray });
  }
}

search.ejs搜索.ejs

<!DOCTYPE html>
<html lang="en" and dir="Itr">

<head>
    <meta charset="utf-8">
    <title>Home</title>
    <!--link rel="stylesheet" href="css/search.css"-->
    <script src="https://kit.fontawesome.com/9b28d88510.js" crossorigin="anonymous"></script>

</head>

<body>
<form method="post" enctype="multipart/form-data"> 
  <div class="search-box">
      <input class="search-txt" type="text" name="searchSong" placeholder="Type to search">
      <a class="search-btn" href="#">
        <i class="fas fa-search"></i>
      </a>
  </div>  

  <div class="search-box2">
    <input class="search-txt2" type="text" name="searchArtist" placeholder="Type to search">
    <a class="search-btn2" href="#">
      <i class="fas fa-search"></i>
    </a>
</div>  

<div class="search-box3">
    <input class="search-txt3" type="text" name="searchGenre" placeholder="Type to search">
    <a class="search-btn3" href="#">
      <i class="fas fa-search"></i>
    </a>
</div>  

<div class="search-box4">
    <input class="search-txt4" type="text" name="searchDecade" placeholder="Type to search">
    <a class="search-btn4" href="#">
      <i class="fas fa-search"></i>
    </a>
</div> 
<button type="submit">Search!</button>
</form>

<% if(typeof outputArray != 'undefined'){%>
 <ul>
    <% outputArray.forEach(function(song) { %>
        <li><%= song %></li>
    <% }); %>
<% } %>
  </ul>
</body>
</html>

I've tried setting urlencoded({extended: }) to true and to false, I've tried changing the form type to application/x-www-form-urlencoded, I've tried changing the post to a get, I've made sure I have body-parser installed, I've tried putting the routes before the server declaration.我尝试将 urlencoded({extended: }) 设置为 true 和 false，我尝试将表单类型更改为 application/x-www-form-urlencoded，我尝试将帖子更改为 get，我我已经确保安装了 body-parser，我已经尝试将路由放在服务器声明之前。 I've read through most of the pages here on the same issue, but none of those fixes have worked for me.我已经通读了这里关于同一问题的大部分页面，但这些修复都没有对我有用。 Even more confusingly, I'm following almost exactly with this tutorial , and I don't think I've missed anything that they did.更令人困惑的是，我几乎完全按照本教程进行操作，而且我认为我没有遗漏他们所做的任何事情。 This is my first time ever using Node.js/Express.js/EJS, but I've read through countless forum posts on this exact topic and I still can't figure out where it's going wrong.这是我第一次使用 Node.js/Express.js/EJS，但我已经阅读了无数关于这个确切主题的论坛帖子，但我仍然无法弄清楚哪里出了问题。

Answer 1

You have body parsers capable of handling requests formatted as JSON or URL Encoded data.您拥有能够处理格式化为 JSON 或 URL 编码数据的请求的正文解析器。

 app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true }));

… but your form isn't using either of those: …但是您的表单没有使用其中任何一个：

 <form method="post" enctype="multipart/form-data">

You don't have any file inputs, so there is no reason to use multipart/form-data (which is more bandwidth intensive that the default URL encoded data).您没有任何文件输入，因此没有理由使用multipart/form-data （它比默认的 URL 编码数据占用更多带宽）。

Remove the enctype attribute.删除enctype属性。

If you wanted to support file inputs then you would need to support multipart/form-data .如果你想支持文件输入，那么你需要支持multipart/form-data 。

One way to do that is to use the express-fileupload module, which the tutorial you linked to recommends but you didn't use.一种方法是使用express-fileupload模块，您链接到的教程推荐但您没有使用。

Express.js req.body.variableName 返回未定义

问题描述

1 个解决方案

解决方案1
0 2020-12-06 20:57:09

Express.js req.body.variableName 返回未定义

问题描述

1 个解决方案

解决方案1 0 2020-12-06 20:57:09

解决方案1
0 2020-12-06 20:57:09