Question

今天想在我的API上发布一些数据，遗憾的是，由于post方法不起作用，我无法做到这一点。我还使用get方法从我的API中获取所有数据并且效果很好。我附上了一些截图。 `

var APIURL = "http://127.0.0.1:8000/api/";

class ArticleCreation extends React.Component{
  constructor(props){
        super(props)
        this.state = {};
        this.state.article = {};
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);       
    }

    componentWillReceiveProps(props){
      this.setState(
        {article:props.article}
      );
    }
    handleChange(e){
            e.preventDefault()
        var article = this.state.article;
        article[e.target.name] = e.target.value;


        this.setState({
                article: article,

          }
        );
    }
    handleSubmit(e){
      e.preventDefault();
      axios.post(APIURL+'animals', this.state.article)
    }
    render(){
      return(
      <div>
        <h1>Hi</h1>
          <form onSubmit={this.handleSubmit}>
              <label> Pet name: 
                <input name="PetName"  type="text" onChange={this.handleChange} />
              </label>
              <br/> 
              <label> Description: 
                <input name="Description"type="text" onChange={this.handleChange} />
              </label>
              <label> Phone: 
                <input name="Phone"  type="tel" onChange={this.handleChange} />
              </label>      
               <hr/>
            <input type="submit" value="save"/>
          </form>
      </div>
      )
    }
}`

API

GET

数据网络

Answer 1

使用.post这样的方法：

Axios.post(URL, { KEY: VALUE }).then...

您使用它的方式是，您将文章作为字符串传递，而不是作为Json对象传递，该对象由键和值对组成

用axios制作post req

1 个答案: