【问题标题】:Express.js req.body.variableName returning undefinedExpress.js req.body.variableName 返回 undefined
【发布时间】:2021-03-18 05:30:43
【问题描述】:

我正在使用带有 Express 和 EJS 作为模板引擎的 Node.js 开发一个网站,但我无法从网站上的表单中获取数据。这是我的代码:

app.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')));

搜索.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 });
  }
}

搜索.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>

我尝试将 urlencoded({extended: }) 设置为 true 和 false,我尝试将表单类型更改为 application/x-www-form-urlencoded,我尝试将帖子更改为 get ,我已经确定我已经安装了 body-parser,我已经尝试将路由放在服务器声明之前。我已经阅读了这里关于同一问题的大部分页面,但这些修复都没有对我有用。更令人困惑的是,我几乎完全关注this tutorial,而且我认为我没有错过他们所做的任何事情。这是我第一次使用 Node.js/Express.js/EJS,但我已经阅读了无数关于这个确切主题的论坛帖子,但我仍然无法弄清楚哪里出了问题。

【问题讨论】:

  • 你能显示来自浏览器开发工具的请求正文吗?
  • 通常顺序如下:模块、设置、中间件、路由、监听器。它可能会解决问题。
  • @Anatoly 我不太确定你的意思。当我 console.log req.body 我只是得到 {}.
  • @MRB 我的意思是行的顺序。所以首先你导入诸如require('express')之类的模块,然后是app.set(),然后是app.use(),然后是app.get()(路由),最后是app.listen()
  • @kmp 我原来是这样的,但我只是试着把所有东西都放回去,还是没有运气

标签: javascript node.js express ejs body-parser


【解决方案1】:

您拥有能够处理格式为 JSON 或 URL 编码数据的请求的正文解析器。

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

...但是您的表单没有使用其中任何一个:

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

您没有任何文件输入,因此没有理由使用multipart/form-data(这比默认的 URL 编码数据更占用带宽)。

删除enctype 属性。


如果你想支持文件输入,那么你需要支持multipart/form-data

一种方法是使用express-fileupload 模块,您链接到的教程推荐但您没有使用。

【讨论】:

  • 每次我删除 enctype 属性时,当我点击搜索/刷新页面时,我的网站就会停止运行(我真的不明白为什么会发生这种情况)。但是,我只是尝试过,在它停止运行之前它仍然没有将任何内容记录到控制台。
  • @kmp 不,没有错误,但还是不行
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-12-20
  • 2016-09-13
  • 2022-01-22
  • 1970-01-01
  • 1970-01-01
  • 2015-02-09
  • 1970-01-01
相关资源
最近更新 更多