如何通过react.js发出POST请求?

时间:2017-11-11 09:32:19

标签: reactjs post fetch

我正在尝试通过反应进行POST请求调用,但我收到错误。如果有任何机构知道帮助我,请帮助我在哪里必须更改。

错误是:{timestamp:1510396949738,状态:415,错误:“不支持的媒体异常:”org.springframework.web.HttpMediaTypeNotSupportedException“,消息:”内容类型'multipart / form-data; boundary = ---- Web ... daryTY6125I1exH8Ry7f; charset = UTF-8'不支持“,......}}

这是我的React代码:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
const style = {
  margin: 15,
marginLeft: 600
};
export default class  Register extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit=this.handleSubmit.bind(this);
}
handleSubmit(e) {
    e.preventDefault();
    var self = this;


    var data = new FormData();
    const payload = {
    id: self.refs.id.getValue(),
    studentName: self.refs.sname.getValue(),
    age: self.refs.age.getValue(),
    emailId: self.refs.emailId.getValue()
};
data.append("myjsonkey", JSON.stringify(payload));

fetch('http://localhost:8083/students/', {
    method: 'POST',
    headers: {
    'Accept': 'application/json'
  },
    body: data
  })
    .then(function(response) {
        return response.json()
      }).then(function(body) {
        console.log(body);
      });
  }

render() {
    return (
      <form onSubmit={this.onSubmit}>
      <div style={style}>
      <TextField ref='id'
      hintText="Enter Student id"
      floatingLabelText="id"
      />
      <br/>
      <TextField ref='sname'
      hintText="Enter your Last Name"
      floatingLabelText="StudentName"
      />
      <br/>
      <TextField ref='age'
      hintText="Enter your Age"
      floatingLabelText="age"
      />
      <br/>

      <TextField ref='emailId'
      hintText="Enter your Email"
      floatingLabelText="emailId"
      />
      <br/>
      <br/>
      <input type="submit" />


      </div>
          </form>


    );
  }


}

1 个答案:

答案 0 :(得分:2)

fetch#post请求中缺少body

body应该是您案例中FormData的实例。或者可以是ArrayBufferBlob/File等其他类型的实例。

var data = new FormData();
const payload = {
    id: self.refs.id,
    studentName: self.refs.sname,
    age: self.refs.age,
    emailId: self.refs.emailId

};
data.append("myjsonkey", JSON.stringify(payload));

fetch('http://localhost:8083/students/', {
    method: 'POST',
    body: data
})

了解更多Fetch