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

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:  
 
saurabh1990aror
JSON
Picked
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
File uploading in React.js
How to set input type date in dd-mm-yyyy format using HTML ?