如何在 Express (Node.js） 中获取从表单传递的数据

How to get data passed from a form in Express (Node.js)

本文关键字：表单 获取 数据 Express js Node      更新时间：2023-09-26

我想使用表单获取从页面传递的数据，并在重定向的页面中使用该数据。

我的客户端有这个表格：

<form action="game" method="get">
    <input type="text" name="name"/>
    <input type="submit" />
</form>

我的服务器中有这个脚本：

app.get('/game',function(req,res){
    res.sendfile(__dirname + '/game.html'); 
});

使用 bodyParser.urlencoded( ( 中间件：

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));

然后表单值将在 req.body 上：

app.post('/game', function (req, res) {
    res.render('the_template', { name: req.body.name });
});

设置{ extended: true }允许 bodyParser 接受表单数据(包括嵌套对象(中的类似 json 的数据。 { person: { name: Adam } }使用javascript而不是传统HTML表单发送的名称值对发送。如果不需要，可以将扩展值设置为 false。不定义扩展选项(即使用默认设置(显然已被弃用，他们似乎希望您决定是需要嵌套选项还是纯名称值对。

如果您希望能够在快速服务器中解析某些路由的表单数据和其他路由的 json 数据，则可以使用：

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: <true|false> }))

x-www-form-urlencoded 内容类型的urlencoded()

  • true - 用于嵌套数据结构
  • false - 用于名称值对

json() - 适用于应用程序/JSON 内容类型

请注意，表单/多部分需要不同的正文解析器(例如 multer(

更新：修复了如果您收到有关正文解析器被弃用的 ExpressJS 错误

取代

app.use(bodyparser.json()); //utilizes the body-parser package
app.use(bodyParser.urlencoded({extended: true}));

由

app.use(express.json()); // Used to parse JSON bodies
app.use(express.urlencoded()); //Parse URL-encoded bodies

重要提示：这已被弃用，接受的答案是正确的解决方案。

要允许 express 很好地处理表单数据，您需要确保包含如下bodyParser：

var express = require('express'),
    app = express.createServer();
app.use(express.bodyParser());
//the rest of your configuration

然后在 POST 处理程序中，您可以通过 Request.body 属性访问表单正文，如下所示：

app.post('/game', function (req, res) {
    res.render('some-file', { name: req.body.name });
});

此外，如果您打算在响应中输出表单数据，则需要使用模板引擎(例如 Jade(。

或者你可以简单地使用express来做到这一点：

   const express = require('express')
   const app = express()
   app.use(express.json()) // for json
   app.use(express.urlencoded({ extended: true })) // for form data

如果需要访问视图中的变量名称，则应使用 res.render 函数并传递变量，如下所示：

res.render('game', {
    name: req.body.name
}

然后在玉做

div!= name

在index.html文件中：

<div class="col">First name
  <input type="text" name="firstname" class="form-control" aria-label="First name">
</div>

在主文件中包括这两个中间件，以便将数据从表单获取为快速

app.use(express.json());
app.use(express.urlencoded({extended: false}));

因此，我们可以使用以下方法获取数据：

console.log(req.body.firstname);

要使用GET方法使其工作，您应该使用req.query：

app.get('/game',function(req,res){
    res.render('relative/path/to/rendering/template', { name: req.query.name });
});

使用GET方法是完全合理的，甚至建议搜索特定对象并将其显示在网页上。

但是，要修改，创建或删除对象，POST方法是要走的路，因为它更安全。

您可以在此处阅读有关两者之间差异的更多信息。

相关文章：