React用fetch提交json格式的数据到后端，后端获取到的数据为空

Question

react在状态中添加了一个空的对象obj:{},input失去焦点的时候将name和value插入到空的对象中.再通fetch将数据提交到后台,后台接收到的数据是空.

  var url = '/customcode/usertest.jsp'
  var obj = this.state.obj;
  console.log(JSON.stringify(obj));
  console.log(obj);
  var fetchOption = {
      method: 'POST',
      headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', },
      body:JSON.stringify(obj)
    }
      // 开始所需数据的下载
      fetch(url,fetchOption)
      .then(response=>response.json())
      .then(responseJson=>{
        console.log(responseJson);
        this.setState({
          data:responseJson
        });
        console.log(this.state.data)
      }).catch(function(e) {
          console.log("Oops, error");
      });

数据格式是下图这样的.

我原来有试过用formData来提交过数据,也是空,不知道是不是哪里有些错了.

  //this.state.formData = new FormData() 这是在状态中设置的;
  var formData = this.state.formData;
  formData.append(e.target.name,e.target.value)
  var url = '/customcode/usertest.jsp'
  var fetchOption = {
    method: 'POST',
    headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', },
    body:formData
  }
  // 开始所需数据的下载
  fetch(url,fetchOption)
  .then(response=>response.json())
      .then(responseJson=>{
          console.log(responseJson);
          this.setState({
              data:responseJson
          });
          console.log(this.state.data)
      }).catch(function(e) {
             console.log("Oops, error");
      });
}     

请问为什么后台都是收不到数据?我这边也没有报错,用json的时候,后台就收到第一个字段的name,value也没有传过去.其他字段就根本没有收到.

Answer 1

试试以下方式：

1. 将header设为{"Content-Type": "application/x-www-form-urlencoded"}
2. json结构数据使用url编码方式设置到body中，如：
   body: {foo: bar, yoo: sar} => body: 'foo=bar&yoo=sar'