ExpressJS - Formulardaten

Formulare sind ein wesentlicher Bestandteil des Webs. Fast jede Website, die wir besuchen, bietet uns Formulare an, die Informationen für uns senden oder abrufen. Um mit Formularen zu beginnen, installieren wir zuerst den Body-Parser (zum Parsen von JSON- und URL-codierten Daten) und die Multer-Middleware (zum Parsen von mehrteiligen / Formulardaten).

Um den Body-Parser und den Multer zu installieren , gehen Sie zu Ihrem Terminal und verwenden Sie -

npm install --save body-parser multer

Ersetzen Sie Ihre index.js Dateiinhalt mit folgendem Code -

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);

Nach dem Import des Body Parsers und Multers verwenden wir den body-parser zum Parsen von json- und x-www-form-urlencodierten Header-Anfragen, während wir verwenden werden multer zum Parsen von mehrteiligen / Formulardaten.

Lassen Sie uns ein HTML-Formular erstellen, um dies zu testen. Erstellen Sie eine neue Ansicht mit dem Namenform.pug mit folgendem Code -

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

Führen Sie Ihren Server wie folgt aus.

nodemon index.js

Gehen Sie nun zu localhost: 3000 / und füllen Sie das Formular aus, wie Sie möchten, und senden Sie es ab. Die folgende Antwort wird angezeigt:

Schauen Sie sich Ihre Konsole an. Es zeigt Ihnen den Text Ihrer Anfrage als JavaScript-Objekt wie im folgenden Screenshot -

Das req.bodyObjekt enthält Ihren analysierten Anforderungshauptteil. Um Felder aus diesem Objekt zu verwenden, verwenden Sie sie einfach wie normale JS-Objekte.

Dies ist die am meisten empfohlene Methode zum Senden einer Anfrage. Es gibt viele andere Möglichkeiten, die jedoch hier nicht behandelt werden müssen, da unsere Express-App alle diese Anforderungen auf dieselbe Weise behandelt. Weitere Informationen zu verschiedenen Möglichkeiten, eine Anfrage zu stellen, finden Sie auf dieser Seite.