ExpressJS - ข้อมูลแบบฟอร์ม

แบบฟอร์มเป็นส่วนหนึ่งของเว็บ เกือบทุกเว็บไซต์ที่เราเยี่ยมชมเสนอแบบฟอร์มที่ส่งหรือดึงข้อมูลบางอย่างให้เรา ในการเริ่มต้นใช้งานแบบฟอร์มขั้นแรกเราจะติดตั้งตัวแยกวิเคราะห์เนื้อหา (สำหรับการแยกวิเคราะห์ JSON และข้อมูลที่เข้ารหัส URL) และมัลเทอร์ (สำหรับการแยกวิเคราะห์ข้อมูลหลายส่วน / ฟอร์ม) มิดเดิลแวร์

ในการติดตั้งตัวแยกวิเคราะห์ร่างกายและตัวกรองให้ไปที่เทอร์มินัลของคุณและใช้ -

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 สำหรับการแยกวิเคราะห์ข้อมูลหลายส่วน / แบบฟอร์ม

ให้เราสร้างแบบฟอร์ม 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 / แล้วกรอกแบบฟอร์มตามที่คุณต้องการแล้วส่ง คำตอบต่อไปนี้จะปรากฏขึ้น -

ดูที่คอนโซลของคุณ มันจะแสดงเนื้อหาของคำขอของคุณเป็นวัตถุ JavaScript ดังภาพหน้าจอต่อไปนี้ -

req.bodyวัตถุมีเนื้อหาคำขอที่แยกวิเคราะห์ของคุณ หากต้องการใช้ช่องจากออบเจ็กต์นั้นให้ใช้เหมือนออบเจ็กต์ JS ทั่วไป

นี่เป็นวิธีที่แนะนำที่สุดในการส่งคำขอ มีวิธีอื่น ๆ อีกมากมาย แต่วิธีเหล่านี้ไม่เกี่ยวข้องที่จะกล่าวถึงในที่นี้เนื่องจากแอป Express ของเราจะจัดการคำขอทั้งหมดในลักษณะเดียวกัน เพื่ออ่านข้อมูลเพิ่มเติมเกี่ยวกับวิธีการที่แตกต่างกันจะทำให้คำขอมีลักษณะที่นี้หน้า