ExpressJS - 表单数据



表单是网页不可或缺的一部分。几乎每个我们访问的网站都提供表单,用于提交或获取信息。要开始使用表单,我们首先需要安装`body-parser`(用于解析 JSON 和 url-encoded 数据)和 `multer`(用于解析 multipart/form-data)中间件。

要安装`body-parser`和`multer`,请打开终端并使用以下命令:

npm install --save body-parser multer

将你的`index.js`文件内容替换为以下代码:

var express = require('express');
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer();
var app = express();

app.get('/', function(req, res){
   res.render('form');
});

app.set('view engine', 'pug');
app.set('views', './views');

// for parsing application/json
app.use(bodyParser.json()); 

// for parsing application/xwww-
app.use(bodyParser.urlencoded({ extended: true })); 
//form-urlencoded

// for parsing multipart/form-data
app.use(upload.array()); 
app.use(express.static('public'));

app.post('/', function(req, res){
   console.log(req.body);
   res.send("recieved your request!");
});
app.listen(3000);

导入`body-parser`和`multer`后,我们将使用`body-parser`解析 json 和 x-www-form-urlencoded 头请求,而使用`multer`解析 multipart/form-data。

让我们创建一个 HTML 表单来测试一下。创建一个名为`form.pug`的新视图,内容如下:

html
html
   head
      title Form Tester
   body
      form(action = "/", method = "POST")
         div
            label(for = "say") Say:
            input(name = "say" value = "Hi")
         br
         div
            label(for = "to") To:
            input(name = "to" value = "Express forms")
         br
         button(type = "submit") Send my greetings

使用以下命令运行你的服务器。

nodemon index.js

现在访问 localhost:3000/,随意填写表单并提交。将显示以下响应:

Response to form submission

查看你的控制台;它将显示你的请求主体作为 JavaScript 对象,如下面的截图所示:

Console output for form

`req.body`对象包含你已解析的请求主体。要使用该对象中的字段,只需像使用普通 JS 对象一样使用它们。

这是最推荐的发送请求的方法。还有许多其他方法,但这里不相关,因为我们的 Express 应用程序将以相同的方式处理所有这些请求。要了解更多关于不同发送请求的方法,请查看页面。

广告
© . All rights reserved.