Question

我正在使用ReactJS开发一个Web应用程序，在其中我创建了一个表单并将所有输入字段的值存储到应用程序的状态中。也就是说，我的App.js文件的状态包含在Form.js文件中创建的所有输入字段的值。我希望将状态存储的信息传递给后端，以便我可以基于该信息处理数据集。如何添加功能，以便在单击“提交”按钮时，应用程序状态中的所有内容都传递到后端，例如传递到文本文件或json文件中。

基本上，我想根据用户以表单（使用ReactJS）提供的信息搜索数据集（使用Elasticsearch）。

我是React的新手，所以我并不了解。我已经制作了Web应用程序，但我需要有关如何将通过表单获取的信息传递给后端的建议，以便我做进一步的工作。

Answer 1

如何添加功能，以便在单击提交按钮时我的应用程序状态中的所有内容都传递给后端-说到文本文件或json文件中。

您可以使用Axios或Fetch API请求在应用程序中使用的数据。您可以使用两种最流行的方法使用REST API，这些方法称为Axios（基于Promise的HTTP客户端）和Fetch API（基于浏览器的内置Web API）。

fetch（）API 是用于从服务器或API端点获取资源的内置JavaScript方法。它类似于XMLHttpRequest

Axios 是用于浏览器和node.js的易于使用的基于Promise的HTTP客户端。由于Axios是基于Promise的，因此我们可以利用async并等待更多可读性和异步代码。使用Axios，我们可以拦截和取消请求，它还具有内置功能，可为客户端提供跨站点请求伪造的保护。

要了解更多信息，请参阅this

以上两种方法都可以用于将数据从前端提交到后端，以便将数据存储到后端，然后可以根据需要对其执行多项操作。 / li>

您可以参考几个博客和文档以了解有关此内容的更多信息：

Use axios to fetch data from an api in ReactJS

Fetch API for POST Request

Axios

Difference between Axios and Fetch API

最近，我还创建了一个应用程序，其中将React与SpringBoot应用程序集成。

在此应用程序中。我已经使用axios设置了路由器和路由，创建并提交了名为GET，POST，PUT，DELETE请求的表单（也已使用访存API完成）。

submitBook= event =>{
event.preventDefault();
const book = {

         title:  this.state.title,
         author: this.state.author,
         coverphotoURL: this.state.coverphotoURL,
         isbnNumber: this.state.isbnNumber,
         price: this.state.price,
         language: this.state.language

};

const headers = new Headers();
headers.append("Content-Type", "application/json");

fetch("http://localhost:8080/rest/books",{
method:"POST",
body:JSON.stringify(book),
headers
})
.then(response => response.json())
.then((book) => {
if(book){
this.setState({"show":true, "method":"post"});
setTimeout(() => this.setState({"show":false}),3000);

}
else{
this.setState({"show":false});

}});
this.setState(this.initialState);

};

要查看完整代码，请参阅我的Github Repository

Answer 2

您需要研究制作XHR或使用访存API（或axios）向后端API发出http请求。

Answer 3

使用axios调用您在后端中定义的api URL。您可以观看youtube上的简短教程，以熟悉基础知识。

Answer 4

您可能要使用MDN中记录的Fetch API。它处理url请求，包括REST API以通过HTTP解析数据，例如JSON对象等

如何在ReactJS中将应用程序状态传递给后端？

4 个答案: