POST request in Express JS

In 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

Displaying Form data in POST request using Express js

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:

Displaying Form data in POST request using Express js

Leave a Reply

Your email address will not be published.