POST request in Express JS
By Manoj SrinivasIn this tutorial, we will learn how to write a post request in Express js.
Displaying Form data in POST request using Express.js
Create a new folder and create a new file(server.js) in it. Write the below code in it. We have used body-parser middleware to parse HTML form. We created a get method to get the form and a post method to display the form data to the same URL. The app is set to listen on port 3000. To support embedded javascript, we set the view engine to ejs.
const express = require('express')
const path = require('path')
const bodyParser = require('body-parser')
let app = express()
app.set('views',path.join(__dirname,'views'))
app.set('view engine','ejs')
app.use(bodyParser.urlencoded({extended:false}))
app.get('/',(req,res)=>{
res.render('form')
})
app.post('/',(req,res)=>{
const {fname,lname,email,birthday} = req.body
res.render('submit',{first:fname,last:lname,email:email,birth:birthday})
})
const port = 3000
app.listen(port,()=>{
console.log(`App is running at port ${port}`)
})Create a new folder named views and create 2 files form.ejs and submit.ejs files. Write the below code to the files.
form.ejs – HTML form
<!DOCTYPE html>
<html>
<head>
<title>Tutorial</title>
</head>
<body>
<h1>Post in NodeJS</h1>
<form action="/" method="post">
<fieldset>
<legend>Form</legend>
<label for="fname">First name:</label>
<input type="text" name="fname" /><br /><br />
<label for="lname">Last name:</label>
<input type="text" name="lname" /><br /><br />
<label for="email">Email:</label>
<input type="email" name="email" /><br /><br />
<label for="birthday">Birthday:</label>
<input type="date" name="birthday" /><br /><br />
<input type="submit" value="submit" />
</fieldset>
</form>
</body>
</html>
submit.ejs – HTML to display form data
<!DOCTYPE html>
<html>
<head>
<title>Tutorial</title>
</head>
<body>
<h1>Submitted form details</h1>
<details>
<summary>First Name</summary>
<p><%= first %></p>
</details>
<details>
<summary>Last Name</summary>
<p><%= last %></p>
</details>
<details>
<summary>Email</summary>
<p><%= email %></p>
</details>
<details>
<summary>Birthday</summary>
<p><%= birth %></p>
</details>
</body>
</html>
OUTPUT:
Required modules: ejs, path, express, body-parser
npm i express npm i ejs path body-parser
node server.js – to run the app
POST request
Create a new folder and create a new file(server.js) in it. Write the below code in it. We have used body-parser middleware to parse HTML form. The data is exchanged using the JSON format. To support JSON parsing, we used the body-parser JSON method.
const express = require('express')
const bodyParser = require('body-parser')
let app = express()
const port = 3000
app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())
app.post("/",(req,res)=>{
const {fname, lname, email, birthday} = req.body
res.json({firstname:fname, lastname:lname, email:email, birthday:birthday})
})
app.listen(3000,()=>{
console.log(`App is listening at port ${port}`)
})Required Modules: body-parser express
Use the below command to install the required modules.
npm i express body-parser
node server.js – to run the app
OUTPUT:
Leave a Reply