Installation Steps
Step 1: Create a folder application by using this command
mkdir myapp
Step 2: Navigate to project directory
cd myapp
Step 3: Initialize the NodeJS application.
npm init -y
Step 4: Install the necessary packages/libraries in your project using the following commands.
npm install express body-parser
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"body-parser": "^1.20.2",
"express": "^4.19.2",
},
Example: Implementation to show post JSON data to the server by setting up the server.
// server.js
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(express.json());
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
app.post("/data", function (req, res) {
console.log(req.body.name);
console.log(req.body.email);
});
app.listen(3000, function () {
console.log("Server started on port 3000");
});
The Frontend structure of our application is simple, with two inputs: one for name and one for email. A send button for sending the input data to the server. When the user hits the send button it makes a POST request with JSON data to the /data route on the server, and then the server logs the received data.
Example: In this example, we will make use of fetch API to send data to the NodeJS server.
<!DOCTYPE html>
<html>
<head>
<title>Post JSON to Server</title>
<script>
function send() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let result = document.getElementById("result");
const json = {
name: name,
email: email,
};
fetch("/data", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(json),
});
}
</script>
</head>
<body>
<h1 style="color: green">Welcome To GFG</h1>
<input type="text" id="name" placeholder="Name" />
<input type="email" id="email" placeholder="Email" />
<button onclick="send()">Send</button>
</body>
</html>
Step to Run Application: Run the application using the following command from the root directory of the project
node server.js
Output: Your project will be shown in the URL http://localhost:3000/
Example 2: The following example shows how we can use XMLHttpRequest (XHR) to make a JSON POST request.
<!DOCTYPE html>
<html>
<head>
<title>Post JSON to Server</title>
<script>
function send() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let result = document.getElementById("result");
const xhr = new XMLHttpRequest();
// create a JSON object
const json = {
name: name,
email: email,
};
// open request
xhr.open("POST", "/data");
// set `Content-Type` header
xhr.setRequestHeader("Content-Type",
"application/json");
// send request with JSON payload
xhr.send(JSON.stringify(json));
}
</script>
</head>
<body>
<h1 style="color: green">Welcome To GFG</h1>
<input type="text" id="name" placeholder="Name" />
<input type="email" id="email" placeholder="Email" />
<button onclick="send()">Send</button>
</body>
</html>
Step to Run Application: Run the application using the following command from the root directory of the project
npm start
Output: Your project will be shown in the URL http://localhost:3000/
- Type the name and email in the input boxes and click on the send button.
- Check the terminal whether the server logs the received data or not.
How to Post JSON Data to Server ?
In modern web development, sending JSON data to a server is a common task, especially when working with RESTful APIs. JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy to read and write for humans and easy to parse and generate for machines. This article will guide you through the process of posting JSON data to a server using different methods in JavaScript, including using the fetch API.
Syntax: The key/value pairs in JSON are separated by commas:
{
"name": "David",
"age": 22,
"gender": "male",
}
Contact Us