By Nicholas Brown.
You can send a POST request with JavaScript using the ‘XMLHttpRequest’ class using few lines of code. There are many uses for JavaScript POST requests, including sending data from a form or other HTML element to a server for processing or storage. A POST request differs from a GET request because it has a body. A GET request encodes the parameters it needs to send in the URL of the request because it has no body.
You can insert an entire JSON object or JSON array in the body of your POST request as shown in the example below. To send a JavaScript POST request, ensure that you have sorted out and decided on the following details first:
- The URL of the endpoint you will send the request to.
- The data you will insert into the body of the request before sending it off. Example: A record containing the details of a shipment or details about a phone you’re selling in a store. A phone is used in the example below.
- The data type of the body, which could be JSON or a plain string.
- The purpose of the request. For this example, you will be entering a phone that you intend to sell in your inventory database. Learn how to store data in a MongoDB database and a PostgreSQL database.
JavaScript POST Request Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const url = "http://localhost:8080/testendpoint";
let request = new XMLHttpRequest();
let newParagraph = document.createElement("p");
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
let apiresponse = request.responseText;
let text = document.createTextNode(apiresponse);
newParagraph.appendChild(text);
newParagraph.innerText = apiresponse;
document.body.appendChild(newParagraph);
}
};
request.open("POST", url, true);
request.setRequestHeader("Content-Type", "application/json");
request.send( JSON.stringify({"Brand": "Apple", "Model": 'iPhone 14 Pro Max', "Price": '$1,200', "Storage": "512GB", "Colour": "Graphite"}) );
</script>
</head>
<body>
</body>
</html>The request in this example is being sent to a server on localhost (which would be the machine this app is run on). You can set up a test server to try it out using my Node.js POST request tutorial. Change ‘url’ to whichever server you are going to send your request to. You could also use Request Catcher.
The code block following ‘request.onreadystatechange = function()’ creates a paragraph in an HTML page to display the server’s response for test purposes. It isn’t required for this JavaScript POST request tutorial.
‘request.open(“POST”, url, true);’ indicates to the method that you want to send a POST request, and the URL you assigned to the ‘url’ variable above is where it will send the request.
‘request.setRequestHeader(“Content-Type”, “application/json”);’ is necessary to tell the server that you are sending it a JSON object. This is enables the server to determine how to go about parsing it.
‘request.send()’ takes the request body as a parameter. This is where you will place your JSON object.