javascript - How to send form data through get request in fetch api - Stack Overflow

admin管理员组

文章数量:1401438

I was having an API where I am calling a get request to send to query parameters through form data but I am getting get request doesn't take form data. How to do it

(C)(C)Br&solvent=CC(C)(C)O this is the URL and solute and solvent are the query parameters.

  const onSubmit = (e) => {
    e.preventDefault(); // <-- prevent the default form action

    const formData = new FormData();
    formData.set("solute", solutestate); // <-- local ponent state
    formData.set("solvent", solventstate); // <-- local ponent state
    console.log({ formData });

    fetch(";, {
      method: "get",
      body: formData,
    }).catch((err) => {
      setError(err.error);
      console.log(err);
    });

When I tried with post I got this error

I was having an API where I am calling a get request to send to query parameters through form data but I am getting get request doesn't take form data. How to do it

http://ihub-fastapi-solubility.herokuapp./predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O this is the URL and solute and solvent are the query parameters.

  const onSubmit = (e) => {
    e.preventDefault(); // <-- prevent the default form action

    const formData = new FormData();
    formData.set("solute", solutestate); // <-- local ponent state
    formData.set("solvent", solventstate); // <-- local ponent state
    console.log({ formData });

    fetch("http://ihub-fastapi-solubility.herokuapp./predict", {
      method: "get",
      body: formData,
    }).catch((err) => {
      setError(err.error);
      console.log(err);
    });

When I tried with post I got this error

• javascript
• reactjs
• post
• fetch-api

Share Improve this question Follow edited Feb 8, 2022 at 2:07 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Feb 8, 2022 at 1:50 harshharsh 58533 gold badges77 silver badges1717 bronze badges 3

• 1 You can't send body with GET request, only with POST. Change the API so that it accepts and processes POST requests – ComixRu Commented Feb 8, 2022 at 1:52
• 1 @ComixRu I don't think OP wants to send a POST request at all, they just want to capture their FormData params as query parameters – Phil Commented Feb 8, 2022 at 2:20
• related: stackoverflow./q/61829691 – djvg Commented Nov 3, 2022 at 9:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

FormData isn't the best choice here as that is primarily used in constructing multipart/form-data request payloads for use in POST, PUT and PATCH requests.

Use URLSearchParams instead to easily construct query parameters and serialise it into the URL...

const fetch = function fakeFetch(url, init) {
  console.log(init.method, url)
}

const solutestate = "CC(C)(C)Br"
const solventstate = "CC(C)(C)O"

const params = new URLSearchParams({
  solute: solutestate,
  solvent: solventstate
})

fetch(`http://ihub-fastapi-solubility.herokuapp./predict?${params}`, {
  method: "GET"
})

Using URLSearchParams has the added benefit of correctly URL encoding your data.

In addition to @phil's answer: If you've got a form already, you can use FormData to initialize the URLSearchParams.

For example, if you've got a form like this

<form method="get" action="" id="form">
...
<input type="submit">
</form>

you can submit it as follows

const form = document.getElementById("form");
form.addEventListener("submit", submitForm);

function submitForm(event) {
  event.preventDefault();
  const url = form.action + "?" + new URLSearchParams(new FormData(form));
  fetch(url)...
}

本文标签： javascriptHow to send form data through get request in fetch apiStack Overflow