Send JSON data via POST to an API using JavaScript
A guide on how to send JSON data to an API using the POST method in JavaScript. The code uses the fetch method to perform the POST request and includes detailed explanations of each step.
Here is the JavaScript code using fetch to send JSON data to an API via POST:
const url = 'https://example.com/api'; // API URL
const data = {
name: 'Nguyen Van A',
email: '[email protected]',
age: 30
};
// Send POST request
fetch(url, {
method: 'POST', // Using the POST method
headers: {
'Content-Type': 'application/json' // Specifying the data format as JSON
},
body: JSON.stringify(data) // Convert JavaScript object to JSON string
})
.then(response => response.json()) // Convert the response from API to JSON
.then(data => {
console.log('Success:', data); // Handle the successful result
})
.catch((error) => {
console.error('Error:', error); // Handle any errors
});Detailed explanation:
-
API URL:
const url = 'https://example.com/api';: This is the API URL where you will send the POST request.
-
JSON data:
const data = {...};: The JavaScript object containing the data you want to send, like name, email, and age.
-
fetch API:
fetch(url, { method: 'POST', headers: {...}, body: ... }): Thefetchfunction is used to send an HTTP request. In this case, it is used to send a POST request to the API URL.
-
Headers:
'Content-Type': 'application/json': This header defines the data format as JSON.
-
body:
body: JSON.stringify(data): Converts the JavaScript object into a JSON string to be sent in the request body.
-
Handling response:
.then(response => response.json()): Converts the API's response into JSON format..then(data => ...): Processes the successful response data..catch(error => ...): Handles any errors that occur during the request.
JavaScript Version:
This code is compatible with JavaScript ES6 and above. The fetch method is supported in modern browsers such as Chrome, Firefox, Edge, and Safari.