There are some different approaches to sending an HTTP POST request in JavaScript, One way is to use the XMLHttpRequest object and Another way to send an HTTP POST request in JavaScript is to use the Fetch API with form data, json, file, body, parameters and x-www-form-urlencoded data, etc.
The HTTP POST request method is used to send data (form data, json, file, body, parameters and x-www-form-urlencoded data, etc) to the server, it typically updates or creates to the resource. When a client sends an HTTP POST request, it includes data in such formats as JSON, XML, or plain text.
How to send POST request in JavaScript
Here are some approaches to make HTTP post request in javascript with form, JSON, XML, or plain text data, you can do it by using the following approaches:
- Approach 1: Using the fetch() API
- Approach 2: Using the XMLHttpRequest object
Approach 1: Using the fetch() API
The fetch() API is a modern and easy-to-use interface for making HTTP requests. It returns a Promise that resolves to the response from the server. So, you need to set endpoint URL, set HTTP method to POST, set the request headers, and send the request body. Here’s an example of how to send HTTP post request in javascript with json body, XML and form data:
fetch('https://example.com/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John Doe', age: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
In the code above, To send an HTTP POST request to the URL https://example.com/api/data with json data { name: 'John Doe', age: 30 }. We are also setting the Content-Type header to application/json to indicate that are sending JSON data in the request body. After the request is sent, are using the then() method to parse the response as JSON and log it to the console.
Approach 2: Using the XMLHttpRequest object
The XMLHttpRequest object is a more traditional way of making HTTP requests in JavaScript. It has been available in browsers for many years and is still widely used today. To make/send an HTTP POST request using the XMLHttpRequest object. So, you need to create a new instance of the object, set the HTTP method to POST, set the request headers, and send the request body. Here’s an example:
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.response);
} else {
console.error(xhr.statusText);
}
};
xhr.onerror = function() {
console.error('An error occurred.');
};
xhr.send(JSON.stringify({ name: 'John Doe', age: 30 }));
In the code above, To create a new XMLHttpRequest object and set the HTTP method to POST. Are also setting the Content-Type header to application/json to indicate that are sending JSON data in the request body. After the request is sent, use the onload event handler to check the status of the response and log it to the console if it’s successful.
Conclusion
That’s it; you have learned how to send HTTP post request in javascript with json body, form data, XML, etc.
