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.
<!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>
<!-- Action to the same route as in app.post() method -->
<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.
// Requiring express npm package const express = require('express')
const app = express() // Using express.urlencoded middleware app.use(express.urlencoded({ extended: true
})) // Handling Post request app.post('/submit',function(req,res){
// Can access all parameters from req.body
console.log('POST parameter received are: ',req.body)
res.redirect('/')
}) // Get request app.get('/',function(req,res){
// Sent index.html file to the client
res.sendFile(__dirname+'/index.html')
}) // Creating server at port 3000 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