How to Send an HTTP POST Request in JS?

Last Updated : 21 May, 2024

We are going to send an API HTTP POST request in JavaScript using fetch API. The FetchAPI is a built-in method that takes in one compulsory parameter: the endpoint (API URL). While the other parameters may not be necessary when making a GET request, they are very useful for the POST HTTP request.

The second parameter is used to define the body (data to be sent) and type of request to be sent, while the third parameter is the header that specifies the type of data you will send, for example, JSON. The Fetch API is based on JavaScript promises, so you need to use the .then method to access the promise or response returned. There are several methods to send an HTTP POST request in JavaScript which are as follows:

Table of Content

Using Fetch
Using Ajax( XMLHttpRequest)

Using Fetch

In this approach, the body holds the data to be sent to the server which is added to the JSON Placeholder todos API. Also, the headers hold the type of content you want to send to the server, which in this case is JSON data.

Example: To demonstrate sending an HTTP POST request using the fetch method in JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <script>
      fetch("https://jsonplaceholder.typicode.com/todos",
    {
        method: "POST",
        body: JSON
        .stringify
        ({
          userId: 1,
          title: "Demo Todo Data",
          completed: false,
        }),
        headers: {
          "Content-type": "application/json",
        },
      })
        .then((response) => response.json())
        .then((json) => console.log(json));
    </script>
  </body>
</html>

Output:

Screenshot-(236) — Sending HTTP POST request in JavaScript using the Fetch method in JavaScript.

Using Ajax( XMLHttpRequest)

Ajax XMLHttpRequest is a in-built function and has existed much longer than the Fetch API. This means that almost all modern browsers have a built-in XMLHttpRequest object to request data from a server.

Example: To demonstrate sending an HTTP POST request in JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <script>
        const xhr = new XMLHttpRequest();
        xhr
        .open("POST", "https://jsonplaceholder.typicode.com/todos");
        xhr
        .setRequestHeader("Content-Type", "application/json");
        const body = JSON
        .stringify(
        {
            userId: 1,
            title: "Demo Todo Data using XMLHttpRequest",
            completed: false,
        });
        xhr
        .onload = () => 
        {
            if (xhr.readyState == 4 && xhr.status == 201) 
            {
                console.log(JSON.parse(xhr.responseText));
            } else 
            {
                console.log(`Error: ${xhr.status}`);
            }
        };
        xhr.send(body);
    </script>
</body>

</html>

Output:

Screenshot-(238) — HTTP post request in JavaScript

How to create and send POST requests in Postman?

bishal1289be21

Improve

Article Tags :

How to Send an HTTP POST Request in JS?

Using Fetch

Using Ajax( XMLHttpRequest)

Similar Reads

Thank You!

What kind of Experience do you want to share?