鍍金池/ 問答/Java  Linux  網(wǎng)絡(luò)安全  HTML/ React用fetch提交json格式的數(shù)據(jù)到后端,后端獲取到的數(shù)據(jù)為空

React用fetch提交json格式的數(shù)據(jù)到后端,后端獲取到的數(shù)據(jù)為空

react在狀態(tài)中添加了一個(gè)空的對(duì)象obj:{},input失去焦點(diǎn)的時(shí)候?qū)ame和value插入到空的對(duì)象中.再通fetch將數(shù)據(jù)提交到后臺(tái),后臺(tái)接收到的數(shù)據(jù)是空.

  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)
    }
      // 開始所需數(shù)據(jù)的下載
      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");
      });

數(shù)據(jù)格式是下圖這樣的.
clipboard.png

我原來有試過用formData來提交過數(shù)據(jù),也是空,不知道是不是哪里有些錯(cuò)了.

  //this.state.formData = new FormData() 這是在狀態(tài)中設(shè)置的;
  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
  }
  // 開始所需數(shù)據(jù)的下載
  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");
      });
}     

請問為什么后臺(tái)都是收不到數(shù)據(jù)?我這邊也沒有報(bào)錯(cuò),用json的時(shí)候,后臺(tái)就收到第一個(gè)字段的name,value也沒有傳過去.其他字段就根本沒有收到.

回答
編輯回答
雨萌萌

試試以下方式:

  1. 將header設(shè)為{"Content-Type": "application/x-www-form-urlencoded"}
  2. json結(jié)構(gòu)數(shù)據(jù)使用url編碼方式設(shè)置到body中,如:
    body: {foo: bar, yoo: sar} => body: 'foo=bar&yoo=sar'
2017年9月23日 05:28