PL
React - AJAX - metoda GET
3 points
W tym artykule chcielibyśmy pokazać, jak wykonać proste żądanie AJAX w React.
Używamy hooka React.useState do przechowywania odpowiedzi z serwera. Metoda fetch przenosi pathdo zasobu, który chcemy pobrać, następnie metoda .text() konwertuje otrzymany z serwera obiekt data na tekst, a wtedy metoda setResponse ustawia wartość stanu response.
Uruchamialny przykład:
xxxxxxxxxx1
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:2
// import React from "react";3
// import ReactDOM from "react-dom";4
5
const App = () => {6
const [response, setResponse] = React.useState();7
React.useEffect(() => {8
const requestText = 'hello';9
fetch(`/examples/echo?text=${encodeURIComponent(requestText)}`)10
.then(response => response.text())11
.then(responseText => {12
setResponse(`Response: ${responseText}`);13
})14
.catch(error => {15
setResponse('Request error!');16
});17
}, []);18
return (19
<div>{response}</div>20
);21
};22
23
const root = document.querySelector('#root');24
ReactDOM.render(<App/>, root );Logikę po stronie serwera, która może obsługiwać żądania z powyższego przykładu, możemy napisać za pomocą frameworku Spring .
xxxxxxxxxx1
import org.springframework.stereotype.Controller;2
import org.springframework.web.bind.annotation.*;3
4
5
public class EchoGetController {6
7
(value = "/examples/echo", method = RequestMethod.GET)8
9
public String makeGetEcho(("text") String text) {10
return text;11
}12
}