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

ahmu
  • 87

问题描述

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>

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

回复
阅读 25k
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 注释了 试试

manli
  • 0
新手上路,请多包涵

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!");
});
鬼木
  • 1
新手上路,请多包涵

最后是如何解决的?

微风
  • 0
新手上路,请多包涵

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

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

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

yong_a
  • 2
新手上路,请多包涵

Content-Type 去掉即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏