使用 axios 创建 post req答案

【问题标题】：Making post req with axios使用 axios 创建 post req
【发布时间】：2018-03-22 21:11:37
【问题描述】：

今天想在我的 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

获取

数据网络

【问题讨论】：

标签： javascript reactjs post axios

【解决方案1】：

像这样使用.post 方法：

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

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

【讨论】：