如何将输入字段的值发布到API？

问题描述

我创建了API，它可以正常运行，因为我是用Postman测试的。现在，我试图使用FormData（）函数通过我的API将数据发送到服务器，但是看起来值格式不正确。 当我按下按钮时，它将项目添加到服务器，但所有字段均为空。

我发出了警报，以查看要添加的内容类型，这就是我得到的内容：[对象FormData]

class AgregarPelicula extends React.Component{

constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);
    alert(data); //shows "[object FormData]"
    fetch("http://localhost/APIpeliculas/api/pelicula/create.php",{
      method: 'POST',body: data,});
}

render(){
    return(
        <div className="container-fluid  d-flex justify-content-center container-agregar"> 
            <form className="form-inline" onSubmit={this.handleSubmit} encType="multipart/form-data">                   
                <label for="inlineFormNombre" className="m-2">Nombre Pelicula:</label>
                <input type="text" name="Nombre" className="form-control m-2" id="inlineFormNombre" />

                <label for="inlineFormDirector" className="m-2">Director:</label>
                <input type="text" name="Director" className="form-control m-2" id="inlineFormDirector" />

                <label for="inlineFormCategoria" className="m-2">Categoria:</label>
                <select class="form-control" name="Categoria">
                    <option>Ciencia Ficción</option>
                    <option>Terror</option>
                    <option>Comedia</option>
                    <option>Bélica</option>
                </select>

                <button className="btn btn-info ml-4">Agregar</button>
            </form>           
        </div>
    );
}

}

这是我从https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f

得到这个想法的地方

我遵循了所有步骤，但没有获取在那里显示的JSON格式。

最终解决了它，我必须像这样访问每个数据属性：

    handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);
    fetch('http://localhost/APIpeliculas/api/pelicula/create.php',body: JSON.stringify({Nombre: data.get('Nombre'),Categoria: data.get('Categoria'),Director: data.get('Director')}),headers:{
        'Content-Type': 'application/json'
      }
    });
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）