我如何post表单数据与获取api?

我的代码:

fetch("api/xxx", {
    body: new FormData(document.getElementById("form")),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "multipart/form-data",
    },
    method: "post",
}

我尝试使用fetch api发布我的表单，它发送的正文是这样的:

-----------------------------114782935826962
Content-Disposition: form-data; name="email"

test@example.com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

pw
-----------------------------114782935826962--

(我不知道为什么每次发送的时候boundary里的数字都会变…)

我想用“Content-Type”:“application/x-www-form-urlencoded”发送数据，我该怎么做?或者如果我必须处理它，我如何解码控制器中的数据?

请回答我的问题，我知道我能做到:

fetch("api/xxx", {
    body: "email=test@example.com&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
}

我想要的是像$(“#form”).serialize()在jQuery (w/o使用jQuery)或解码控制器中的多部分/表单数据的方法。谢谢你的回答。

当前回答

Content-Type: " multipart /form-data"

const formData = new FormData(document.getElementById("form"))

fetch("http://localhost:8000/auth/token", {
  method: "POST",
  body: formData,
  headers: {
    "Content-Type": "multipart/form-data"
  }
})

Content-Type: "application/x-www-form-urlencoded"

const formData = new URLSearchParams(new FormData(document.getElementById("form")))

fetch("http://localhost:8000/auth/token", {
  method: "POST",
  body: formData,
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  }
})

2022-09-15 12:26:42

其他回答

使用fetch api，你不需要包含“Content-type”:“multipart/form-data”的头文件。

所以下面的工作:

let formData = new FormData()
formData.append("nameField", fileToSend)

fetch(yourUrlToPost, {
   method: "POST",
   body: formData
})

注意，对于axios，我必须使用content-type。

2021-02-03 09:43:50

@ kamilkieczzewski回答是伟大的，如果你是表单数据格式是在表单多部分风格，但如果你需要提交的表单查询参数风格:

如果您希望以使用简单GET提交的方式生成查询参数，也可以将FormData直接传递给URLSearchParams构造函数。

        form = document.querySelector('form')
        const formData = new FormData(form);
        formData["foo"] = "bar";
        const payload = new URLSearchParams(formData)
        fetch(form.action, payload)

2022-03-29 14:12:54

Content-Type: " multipart /form-data"

const formData = new FormData(document.getElementById("form"))

fetch("http://localhost:8000/auth/token", {
  method: "POST",
  body: formData,
  headers: {
    "Content-Type": "multipart/form-data"
  }
})

Content-Type: "application/x-www-form-urlencoded"

const formData = new URLSearchParams(new FormData(document.getElementById("form")))

fetch("http://localhost:8000/auth/token", {
  method: "POST",
  body: formData,
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  }
})

2022-09-15 12:26:42

使用FormData和fetch来抓取和发送数据

fetch(form.action, {method:'post', body: new FormData(form)});

函数send(e,form) { fetch(形式。action，{方法:'post'， body: new FormData(form)}); console.log('我们异步发送帖子(AJAX)'); e.preventDefault (); ｝ <form method="POST" action="myapi/send" onsubmit="send(event,this) "" > <input hidden name="csrfToken" value="a1e24s1"> <input name="email" value="a@b.com"> <input name="phone" value="123-456-789"> < input type = " submit " > > < /形式在chrome控制台>网络之前/之后“提交”

2020-01-21 18:41:54

你可以将body设置为URLSearchParams的一个实例，并将查询字符串作为参数传递

fetch("/path/to/server", {
  method:"POST"
, body:new URLSearchParams("email=test@example.com&password=pw")
})

document.forms[0]。Onsubmit = async(e) => { e.preventDefault (); const params = new URLSearchParams([…]新FormData (e。target) .entries ())); // fetch("/path/to/server"， {method:"POST"， body:params}) const response =等待新的响应(params).text(); console.log(响应); ｝ < >形式 <input name="email" value="test@example.com"> <input name="password" value="pw"> < input type = " submit " > > < /形式

2017-10-09 06:45:14

我如何post表单数据与获取api?

推荐文章

最新文章

标签