【React】FormData+fetch 提交数据时如何正确格式数据

• Z时代
• 2024-01-10
• 分类：技术分享

问题描述

react项目，在fetch下使用FormData对form表单元素进行数据封装后进行post提交至服务器，其格式被转为了WebKitFormBoundary模式，如下图

代码如下：

export function addChapter() {
return (dispatch) => {
let data = new FormData(document.getElementById('admin-edit__form'));
return fetch('/func', {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
body: data
})
.then(response => response.json())
.then(json => {
console.log(json);
})
.catch(function(error) {
console.log('request failed: ', error)
})
}
}

若直接使用浏览器原生form表单submit按钮提交，数据格式正常，如下图：

form表单基本代码如下：

<form
method="post"
action="/func"
encType="application/x-www-form-urlencoded"
id="admin-edit__form"
className="admin-edit__form"
onSubmit={e => this.HandleSubmit(e)}
>
....
</form>

想请问下是否哪里设置错误了？求大神帮助

回答

引用之前微风给的答案，这才是正确的，不知道为什么被忽略了

var searchParams = new URLSearchParams()
searchParams.set('method','next')
fetch('https://www.example.com/', {
  method: 'POST',
  body: searchParams
}).then(function(response){
  console.log(response.json())
})

或者如果不想使用URLSearchParams对象，则需要在headers对象中设置"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",代码如下

fetch('https://www.example.com/', {
  method: 'POST',
  headers: {
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
  },
  body: "method=next"
}).then(function(response){
  console.log(response.json())
})

把headers 注释了 试试

reacjs 用 fetch 上传图片, 不可设置 header, 参考https://segmentfault.com/a/11...

点击这里看详情

content－type更改为application/x-www-form-urlencoded
body的参数更改为userName=&password=admin格式的
就可以了。

fetch("http://www.example.org/submit.php", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "userName=&password=admin"
}).then(function(res) {
  if (res.ok) {
    alert("Perfect! Your settings are saved.");
  } else if (res.status == 401) {
    alert("Oops! You are not authorized.");
  }
}, function(e) {
  alert("Error submitting form!");
});

最后是如何解决的？

一些瞎鸡巴扯淡的答案，验证通过了么？

var searchParams = new URLSearchParams()
searchParams.set('method','next')
fetch('https://www.example.com/', {
  method: 'POST',
  body: searchParams
}).then(function(response){
  console.log(response.json())
})

或者如果不想使用URLSearchParams对象，则需要在headers对象中设置"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",代码如下

fetch('https://www.example.com/', {
  method: 'POST',
  headers: {
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
  },
  body: "method=next"
}).then(function(response){
  console.log(response.json())
})

希望这个答案能给后面的人解答。

Content-Type 去掉即可

以上是 【React】FormData+fetch 提交数据时如何正确格式数据 的全部内容， 来源链接： utcz.com/a/77376.html