Wysyłanie żądań POST poprzez AJAX w JavaScript

Teraz wyślijmy do serwera żądanie POST. W tym celu funkcja fetch ma drugi parametr z ustawieniami. W ustawieniu method określa się metodę żądania HTTP. Określmy metodę POST:

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
	});
});

Ustawmy również dane, które chcemy wysłać do serwera. W żądaniach POST dane są przesyłane w treści żądania HTTP. W tym celu dane należy podać w ustawieniu body. Podajmy je w postaci Query String, ustawiając ich odpowiedni typ MIME:

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
		body: 'num1=1&num2=2',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded',
		},
	});
});

Odbierzmy te dane na serwerze, zróbmy z nimi coś i wyślijmy je z powrotem:

export default {
	'/handler/': function({ post }) {
		return Number(post.num1) + Number(post.num2);
	}
}

Po stronie klienta znajduje się div i przycisk. Po kliknięciu przycisku wyślij do serwera trzy liczby metodą POST. Niech serwer znajdzie sumę przekazanych liczb. Wynik zapisz w divie.