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.
Similar Reads
How to Create A REST API With JSON Server ?
Setting up a RESTful API using JSON Server, a lightweight and easy-to-use tool for quickly prototyping and mocking APIs. JSON Server allows you to create a fully functional REST API with CRUD operations (Create, Read, Update, Delete) using a simple JSON file as a data source. Table of Content GET Re
4 min read
How to Receive JSON Data at Server Side ?
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
2 min read
How to Post JSON Data using Curl ?
One can send the post data using curl (Client for URLs), a command line tool, and a library for transferring data with URLs. It supports various types of protocols. Most of the use cases of the curl command are posting JSON data to a server endpoint. CURLcURL stands for ( Client for URLs) and is a c
3 min read
How to receive JSON POST with PHP ?
In this article, we will see how to retrieve the JSON POST with PHP, & will also see their implementation through the examples. First, we will look for the below 3 features: php://input: This is a read-only stream that allows us to read raw data from the request body. It returns all the raw data
2 min read
How to create mock servers using Postman
Postman is a comprehensive API platform used by developers; this platform provides a set of tools that support API design, testing, documentation, mocking, and API Monitoring. It also simplifies each step of the API lifecycle and streamlines collaboration, enabling developers to create and use APIs
7 min read
How to Work with JSON Data in Ruby?
JSON, which stands for JavaScript Object Notation, is a format used to exchange data between different systems. It is popular because it is easy for both computers and humans to understand. This article focuses on discussing working with JSON data in Ruby. Table of Content Installing the JSON GemPar
3 min read
How to send a JSON object to a server using Javascript?
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 ar
2 min read
How to Handle a Post Request in Next.js?
NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications. In this article, we will learn about How to handle a post request in NextJS. A
2 min read
How to Return JSON from a PHP Script ?
Returning JSON Data consists of converting PHP data structures like arrays or objects into a JSON format. In this article, we will explore two different approaches to Return JSON from a PHP Script. Below are the approaches to Return JSON from a PHP Script: Table of Content Using json_encode() Using
2 min read
How to Upload File and JSON Data in Postman?
Postman is a very famous API development tool used to test APIs. Postman simplifies the process of the API lifecycle to create and test better APIs. Now, while we are working with APIs sometimes we need to send JSON as data or upload a file through API. There may be a scenario where we have to do bo
4 min read