Utilizing Forms in a Post Request (including JavaScript fetch())

Question

Utilizing Forms in a Post Request (including JavaScript fetch())

How do I include a form parameter in a POST request using JavaScript fetch()? For example:

curl --form "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5b4c5b4e5a5840787a51454b585d">[email protected]</a>" "https://example.com/api/v4/endpoint"

I attempted the following code:

const form = new FormData()
form.append("foo":"bar")
fetch( "https://someapi.org/api", {
    method: 'POST',
    headers: form
} )
    .then( response => response.json() )
    .then( response => {
        console.log(response)
    } );
}

This approach did not work for me.

javascript typescript http fetch deno

Answer 1

Answer №1

Ensure that the FormData is included in the body property of the RequestInit as shown below:

Remember to set the appropriate Content-Type header. You can learn more about Using FormData Objects on MDN.

TS Playground

so-70865955.ts:

async function example () {
  const form = new FormData();
  form.append("foo", "bar");

  const apiAddress = "https://someapi.org/api";

  const init: RequestInit = {
    method: 'POST',
    headers: new Headers([['content-type', 'application/x-www-form-urlencoded']]),
    body: form,
  };

  const response = await fetch(apiAddress, init);
  const data = await response.json();
  console.log(data);
}

// Invoke it
example();

When running in your console, use the command:

deno run --allow-net so-70865955.ts

Answer 2

Ensure that the FormData is included in the body property of the RequestInit as shown below:

Remember to set the appropriate Content-Type header. You can learn more about Using FormData Objects on MDN.

TS Playground

so-70865955.ts:

async function example () {
  const form = new FormData();
  form.append("foo", "bar");

  const apiAddress = "https://someapi.org/api";

  const init: RequestInit = {
    method: 'POST',
    headers: new Headers([['content-type', 'application/x-www-form-urlencoded']]),
    body: form,
  };

  const response = await fetch(apiAddress, init);
  const data = await response.json();
  console.log(data);
}

// Invoke it
example();

When running in your console, use the command:

deno run --allow-net so-70865955.ts

Utilizing Forms in a Post Request (including JavaScript fetch())

Answer №1

Similar questions

Guide on how to navigate within an app by clicking on a link from an email

Is there a way to remove array elements once in order to replace them with new ones using a for loop?

Reduce brightness in JavaScript - adjust downward

Obtain the values from this JSON array

Angular material is experiencing an issue where content is being cut off or

JavaScript: Finding the current month and all subsequent months until the end of the year

TypeORM Error: Trying to access property 'findOne' of an undefined object

Insert within a canvas

What is the correct method for specifying the date field in my TypeScript interface that will be retrieved from my cloud function?

Using Javascript to Treat an HTML Document as a String

Trouble arises when attempting to compare two JSON files with an undefined issue

Create a jQuery popup form with a variety of interactive buttons

This method or property is not supported by the object - How to call an Applet in Internet Explorer 9

App:// is where Electron and Vue API requests converge

Ways to effortlessly activate an angular directive once the page has been fully loaded

Limitations on Embedding Videos with YouTube Data API

What is the best way to tally up all the image tags contained in an HTML string?

How to shift an image to the right side of the navbar

What is the best way to use regular expressions in JavaScript to pull out a date value from a string?

What is the process for transferring a Pulumi Output<T> to the container definition of a task in ECS?