There are some different approaches to send an HTTP POST request in JavaScript. One way is to use the XMLHttpRequest object. Another way to send an HTTP POST request in JavaScript is to use the Fetch API.
The HTTP POST request method is used to send data to the server, typically to update or create a resource. When a client sends an HTTP POST request, it includes data in such format JSON, XML, or plain text. In this tutorial, we will show you how to send HTTP POST request using jsonbody, form data, etc in JavaScript
How to send POST request in JavaScript
If you want to send HTTP post request in javascript with SON, XML, or plain text, you can do it by using the following methods:
- 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.
