How to send a JSON object to a server using Javascript?

Last Updated : 17 Jan, 2022

JavaScript Object Notation (JSON). It is a lightweight data transferring format. It is very easy to understand by human as well as machine. It is commonly used to send data from or to server. Nowadays it is widely used in API integration because of its advantages and simplicity.
In this example we are going to use AJAX (Asynchronous JavaScript And XML), to send data in background. We are using PHP for the backend.
Frontend:

HTML:

In the frontend we are going to build a form which takes name and email as a input and converts it into JSON object using javascript and send it to the server.
After clicking the submit button a sendJSON() is called which is defined below.

html

<!DOCTYPE html>
<html>
  <head>
    <title>
      JavaScript | Sending JSON data to server.
    </title>
  </head>

  <body style="text-align:center;" id="body">
    <h1 style="color:green;">
      GeeksForGeeks
    </h1>

    <p>
        <!-- Making a text input -->
        <input type="text" id="name" placeholder="Your name">
        <input type="email" id="email" placeholder="Email">
        
        <!-- Button to send data -->
        <button onclick="sendJSON()">Send JSON</button>

      <!-- For printing result from server -->
      <p class="result" style="color:green"></p>
    
   </p>

  <!-- Include the JavaScript file -->
  <script src="index.js"></script>

  </body>
</html>

JavaScript:
When sending data to a web server, the data has to be a string. So we are using JSON.stringify() function to convert data to string and send it via XHR request to the server. Below is the sample code.

javascript

function sendJSON(){
             
            let result = document.querySelector('.result');
            let name = document.querySelector('#name');
            let email = document.querySelector('#email');
             
            // Creating a XHR object
            let xhr = new XMLHttpRequest();
            let url = "submit.php";
      
            // open a connection
            xhr.open("POST", url, true);

            // Set the request header i.e. which type of content you are sending
            xhr.setRequestHeader("Content-Type", "application/json");

            // Create a state change callback
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {

                    // Print received data from server
                    result.innerHTML = this.responseText;

                }
            };

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

            // Sending data with the request
            xhr.send(data);
        }

Backend:

We are using PHP as a scripting language. Create a file named submit.php, in this file, we'll decode the received data to JSON and return a sentence formed using the received data.

php

<?php

header("Content-Type: application/json");

$data = json_decode(file_get_contents("php://input"));

echo "Hello $data->name, your email is $data->email";

?>

Now when you fill the details and press the Send JSON button you'll see something like:

How to send a JSON object to a server using Javascript?

frikishaan

Improve

Article Tags :

How to send a JSON object to a server using Javascript?

Similar Reads

Thank You!

What kind of Experience do you want to share?