React - AJAX - metoda POST

W tym artykule chcielibyśmy pokazać, jak wykonać żądanie POST w Reakcie .

W poniższym przykładzie zastosowano metodę fetch z dwoma parametrami:

• ścieżką do logiki backendu znajdującej się na serwerze,
• konfiguracją żądania, która pozwala nam skonfigurować: metodę, nagłówek, treść żądania itp.

W poniższym przykładzie użyliśmy metody POST, która pozwala na przesłanie pewnych danych w treści.

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// import React from 'react';

const Form = () => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const elements = e.target.elements;
    const requestData = {
      username: elements.username.value,
      password: elements.password.value,
    };
    const requestJson = JSON.stringify(requestData);
    try {
      const response = await fetch("/path/to/backend", {
        method: "POST",
        body: requestJson,
      });
      const responseText = await response.text();
      console.log(responseText);
    } catch (ex) {
      console.error("POST - błąd!");
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Nazwa użytkownika: </label>
        <input type="text" name="username" />
      </div>
      <div>
        <label>Hasło: </label>
        <input type="password" name="password" />
      </div>
      <div>
        <input type="submit" value="Zatwierdź!" />
      </div>
    </form>
  );
};

const root = document.querySelector("#root");
ReactDOM.render(<Form />, root);