How to send a JSON object to a server using Javascript? Last Updated : 17 Jan, 2022 Comments Improve Suggest changes Like Article Like Report 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: Comment More infoAdvertise with us Next Article How to send a JSON object to a server using Javascript? frikishaan Follow Improve Article Tags : JavaScript Web Technologies JSON Similar Reads How to transform JSON text to a JavaScript object ? JSON (JavaScript Object Notation) is a lightweight data-interchange format. As its name suggests, JSON is derived from the JavaScript programming language, but it’s available for use by many languages including Python, Ruby, PHP, and Java, and hence, it can be said as language-independent. For human 3 min read How to parse JSON object using JSON.stringify() in JavaScript ? In this article, we will see how to parse a JSON object using the JSON.stringify function. The JSON.stringify() function is used for parsing JSON objects or converting them to strings, in both JavaScript and jQuery. We only need to pass the object as an argument to JSON.stringify() function. Syntax: 2 min read Safely Turning a JSON String into an Object in JavaScript JSON (JavaScript Object Notation) is a data format used for storing and exchanging data. It is a lightweight and flexible format that can be easily parsed and understood by both humans and machines. When working with JSON data, it is important to know how to safely turn a JSON string into an object. 5 min read How to Generate or Send JSON Data at the Server Side using Node.js ? In modern web development, JSON (JavaScript Object Notation) is the most commonly used format for data exchange between a server and a client. Node.js, with its powerful runtime and extensive ecosystem, provides robust tools for generating and sending JSON data on the server side. This guide will wa 3 min read How to change JSON String into an Object in JavaScript ? In this article we are going to learn how to change JSON String into an object in javascript, JSON stands for JavaScript object notation. It is the plain format used frequently as a communication medium on the internet. It appears close to OOP language like JavaScript but cannot be accessed like Jav 3 min read How to Convert HTML Form Field Values to JSON Object using JavaScript? Storing HTML input data into JSON format using JavaScript can be useful in various web development scenarios such as form submissions, data processing, and AJAX requests. Here we will explore how to convert the HTML form input data into the JSON format using JavaScript. ApproachThe HTML file contain 2 min read 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 gu 4 min read How to Send Response From Server to Client using Node.js and Express.js ? In web development, sending responses from the server to the client is a fundamental aspect of building interactive and dynamic applications. Express.js, a popular framework for Node.js, simplifies this process, making it easy to send various types of responses such as HTML, JSON, files, and more. T 4 min read Converting JSON text to JavaScript Object Pre-requisite: JavaScript JSON JSON (JavaScript Object Notation) is a lightweight data-interchange format. As its name suggests, JSON is derived from the JavaScript programming language, but it’s available for use by many languages including Python, Ruby, PHP, and Java and hence, it can be said as l 3 min read JSON vs JavaScript Object JSON (JavaScript Object Notation) and JavaScript Objects are important for handling data in JavaScript, but they serve different purposes. JSON is a lightweight data format for transferring data, while JavaScript Objects are in-program data structures used for manipulation and logic.What is JSON?JSO 2 min read Like