|
In this project we’ll mimic the action of submitting data using POST to a server from a web page. We replicate this process using AJAX (Asynchronous JavaScript and XML) directly in a web page, we’re embedding similar functionality within our own interface. This involves setting up HTML elements like input fields and buttons to gather user input, using JavaScript to construct and send the request to the server, and handling the response accordingly.
PrerequisiteApproach to Replicate Postman POST API Request using AJAX- Setup HTML structure and define JavaScript Function.
- Set up the XMLHttpRequest object with the appropriate details.
- Construct the payload for your POST request.
- Use the XMLHttpRequest’s send() method to send the POST request to the desired API endpoint.
- Setting Up ExpressJS: The code initializes an Express.js server.
- Define logic within the callback function to handle the response received from the server.
Steps to Create HTML project that replicates Postman POST APISet Up Your HTML File (Frontend):Create an HTML file with the name index.js. Add the below mentioned code in it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POST Request Example</title>
</head>
<body>
<input type="text" id="urlInput" placeholder="Enter API Endpoint URL">
<button onclick="sendPostRequest()">Send POST Request</button>
<div id="response"></div>
<script>
function sendPostRequest() {
var xhr = new XMLHttpRequest();
var url = document.getElementById("urlInput").value;
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 201) { // Handle both 200 and 201
// Handle the response data here
document.getElementById("response").innerText = xhr.responseText;
} else {
// Handle error response here
document.getElementById("response").innerText = 'Error: ' + xhr.status;
}
}
};
var data = JSON.stringify({
// Include your request payload here
key1: 'value1',
key2: 'value2'
});
xhr.send(data);
}
</script>
</body>
</html>
Run the HTML fileTest your implementation by opening the HTML file in a web browser.
Set up the Backend:Step 1: Initialize a Node.js Project
- Open your terminal.
- Create a new project directory, Navigate to your project directory.
mkdir <<name of project>>
cd <<name of project>> Run the following command to initialize a new Node.js project and create a package.json file:
npm init -y Step 2: Install Dependencies
Run the following command to install the required dependencies (Express.js,cors):
npm install express cors Step 3: Create index.js File
The index.js below sends request to the server using POST method. Let’s test this file using both Postman and our project.
JavaScript
// index.js
const express = require('express');
const cors = require('cors');
const app = express();
const port = 5000;
app.use(cors()); // Enable CORS for all routes
const propertySchema = {
name: String,
description: String,
numberOfRooms: Number,
washroom: Number,
kitchen: Boolean,
hall: Boolean,
amenities: [String]
};
// Temporary storage for properties
let properties = [
{
id: 1,
name: "Luxury Beachfront Villa",
location: "Malibu, California",
room: 7,
price: 1500000,
amenities: ["Private Beach Access", "Infinity Pool", "Home Theater"]
},
{
id: 2,
name: "Charming Cottage",
location: "Cotswolds, England",
room: 3,
price: 400000,
amenities: ["Fireplace", "Garden", "Country Views"]
},
{
id: 3,
name: "Modern Downtown Loft",
location: "New York City, New York",
room: 2,
price: 800000,
amenities: ["City Views", "Gym", "Concierge Service"]
},
{
id: 4,
name: "Rustic Mountain Cabin",
location: "Aspen, Colorado",
room: 4,
price: 600000,
amenities: ["Hot Tub", "Ski-In/Ski-Out Access", "Wood-Burning Fireplace"]
},
{
id: 5,
name: "Paris Apartment",
location: "Paris, France",
room: 6,
price: 2500000,
amenities: ["Terrace", "Panoramic City Views", "24/7 Security"]
},
{
id: 6,
name: "Secluded Lakeside Retreat",
location: "Lake District, England",
room: 5,
price: 1000000,
amenities: ["Private Dock", "Boathouse", "Tranquil Surroundings"]
}
];
// // Route to list properties
app.get('/properties', (req, res) => {
res.json(properties);
});
// Route to create a new property
app.post('/properties', (req, res) => {
const newProperty = req.body;
properties.push(newProperty);
res.status(201).json({ message: 'Property created successfully', property: newProperty });
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
Output of POST API in Postman output in Postmam Output in POST API HTML file output in index.js
|
