How to Receive JSON Data at Server Side ?

Last Updated : 10 Mar, 2022

JavaScript Object Notation (JSON) is a data transferring format used to send data to or from the server. It is commonly utilized in API integration due to its benefits and simplicity. In this example, we will utilize XML HttpRequest to deliver data to the server.

Frontend: We will use a simple form containing name and email as an input and submit button to send it to the server. The data that is sent to a web server must be a string. As a result, we use the JSON.stringify() function to transform data to a string and transmit it to the server via an XHR request.

HTML

<!DOCTYPE html>
<html>

<body>
    <h1>GeeksForGeeks</h1>
    <input type="text" id="name" 
           placeholder="Your name" />
    <input type="email" id="email"
           placeholder="Email" />
    <button onclick="sendJSONdata()">
      Submit
    </button>
    <script>
        function sendJSONdata() {
            var name = document.getElementById("name");
            var email = document.getElementById("email");

            // Creating a XHR object
            var xhr = new XMLHttpRequest();

            // open a connection
            xhr.open("POST", "/userdata");

            // Setting the request header
            xhr.setRequestHeader(
              "Content-Type", "application/json"
            );

            // Converting JSON data to string
            var data = JSON.stringify(
              { name: name.value, email: email.value }
            );
            xhr.send(data);

            name.value = "";
            email.value = "";
        }
    </script>
</body>

</html>

Backend: We will use the Express framework and NodeJS to create the server which is running on port 3000. The post request by front-end on the /userdata route is handled here and one can see the data sent by the frontend by logging it with the help of the console.log() method.

JavaScript

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());

app.get("/", function (req, res) {
    res.sendFile(__dirname + "/index.html");
});

app.post("/userdata", function (req, res) {
    console.log(req.body);
});

app.listen(3000, function () {
    console.log("Server started on port 3000");
});

Output:

How to Receive JSON Data at the Client Side ?

vishalkumar98765432

Improve

Article Tags :

How to Receive JSON Data at Server Side ?

Similar Reads

Thank You!

What kind of Experience do you want to share?