How to Post JSON Data to Server ?

Last Updated : 01 Aug, 2024

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",
}

Why Post JSON Data?

Posting JSON data to a server is often used for:

Submitting form data
Sending complex data structures
Communicating between frontend and backend applications
Updating resources on the server

Using the Fetch API

The fetch API is a modern and versatile method to make HTTP requests in JavaScript. It is built into modern browsers and provides a simple interface for fetching resources across the network.

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.

JavaScript

// 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.

HTML

<!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.

HTML

<!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.

Conclusion

Posting JSON data to a server is a fundamental task in web development. Whether you use the built-in fetch API or the powerful Axios library, understanding how to perform this task effectively is crucial for building modern web applications. By following the examples provided, you can confidently post JSON data to any server endpoint and handle the responses and errors appropriately.