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

问题描述

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>

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

阅读 34.8k
9 个回答

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

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 注释了 试试

新手上路,请多包涵
推荐问题
宣传栏