reactjs 如何在获取API中通过get请求发送表单数据

mfpqipee 于 2022-11-04 发布在 React

关注(0)|答案(2)|浏览(152)

我有一个API，我调用一个get请求通过表单数据发送到查询参数，但我得到get请求不接受表单数据。如何做

http://ihub-fastapi-solubility.herokuapp.com/predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O这是URL，溶质和溶剂是查询参数。

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

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

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

当我尝试使用post时，出现

错误

reactjs

来源：https://stackoverflow.com/questions/71027678/how-to-send-form-data-through-get-request-in-fetch-api

2条答案

按热度按时间

jdgnovmf1#

FormData在这里不是最佳选择，因为它主要用于构建multipart/form-data请求有效负载，以供POST、PUT和PATCH请求使用。
使用URLSearchParams来轻松构造查询参数并将其序列化为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.com/predict?${params}`, {
  method: "GET"
})

使用URLSearchParams还有一个额外的好处，那就是可以正确地对数据进行URL encoding。

赞(0）回复(0）举报 2022-11-04

dly7yett2#

除了@菲尔的回答：如果已经有了一个窗体，可以使用FormData初始化URLSearchParams。
例如，如果你有一个这样的表单

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

您可以按以下方式提交

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)...
}

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs 如何在获取API中通过get请求发送表单数据

2条答案

相关问题

热门标签

最新问答