How to receive post parameter in Express.js ?
Last Updated :
23 Nov, 2022
Express is a small framework that sits on top of Node.js’s web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize your application’s functionality with middleware and routing; it adds helpful utilities to Node.js’s HTTP objects; it facilitates the rendering of dynamic HTTP objects. Express.js provides various types of methods for handling different types of incoming requests such as get, Post, etc from the client-side. In this article, we will discuss how to receive post parameter in express.js.
POST parameter can be received from a form using express.urlencoded() middleware and the req.body Object. The express.urlencoded() middleware helps to parse the data that is coming from the client-side.
Syntax:
express.urlencoded( [options] )
Parameter: The options parameter contains various properties like extended, inflate, limit, verify, etc.
Return Value: It returns an Object.
Example: Let’s discuss each step one by one to receive post parameters in the express.js
Step 1: Create an “app.js” file and initialize your project using npm.
npm init
Step 2: Create an “index.html” file and install the express package using npm.
npm install express
Project Structure:
Project/File Structure
Step 3: Now let us first code the “index.html” file. In it, we make a form and submit that form as method “POST” to the ‘/submit‘ route which we would declare later in the “app.js” file.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<form action="/submit" method="post">
Name: <input type="text" name="name">
<br><br>
Email: <input type="email" name="email">
<br><br>
Gender: <br> <input type="radio" name="gender" id="male">
Male
<br>
<input type="radio" name="gender" id="female">
Female
<br>
<input type="radio" name="gender" id="private">
Don't want to disclose
<br><br>
Hobbies: <br> <input type="checkbox"
name="painting" id="painting">
Painting
<br>
<input type="checkbox" name="dancing" id="dancing">
Dancing
<br>
<input type="checkbox" name="singing" id="singing">
Singing
<br> <br>
<input type="file" name="file" id="">
<br> <br>
<button type="submit">Submit</button>
</form>
</body>
</html>
|
Step 4:
- Now in the app.js file we will define the GET request to the root of the app. For the GET request, we send the “index.html” file to the client.
- For the ‘/submit‘ POST request we take input from the form and console log req.body. The req.body is an Object which contains all the attributes of the form. We can access any attribute using req.body.<attribute_name>. For eg: req.body.name in this case.
app.js
const express = require('express')
const app = express()
app.use(express.urlencoded({
extended: true
}))
app.post('/submit',function(req,res){
console.log('POST parameter received are: ',req.body)
res.redirect('/')
})
app.get('/',function(req,res){
res.sendFile(__dirname+'/index.html')
})
app.listen(3000,function(req,res){
console.log('started listening at server 3000')
})
|
Step 5: Run app.js file using below command:
node app.js
Step 6.Type localhost server address in any browser.
http://localhost:3000/
Output: So, In this way we can receive post parameter in the express.js.
Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...