POST-verzoeken verzenden via AJAX in JavaScript

Laten we nu een POST-verzoek naar de server sturen. Hiervoor heeft de functie fetch een tweede parameter met instellingen. In de instelling method wordt de HTTP-verzoekmethode aangegeven. Laten we de POST-methode opgeven:

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

Laten we ook de gegevens opgeven die we naar de server willen sturen. In POST-verzoeken worden gegevens verzonden in de body van het HTTP-verzoek. Hiervoor moeten de gegevens worden opgegeven in de instelling body. Laten we ze opgeven in de vorm van Query String, en het bijbehorende MIME-type instellen:

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

Laten we deze gegevens op de server ontvangen, er iets mee doen en ze terugsturen:

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

Op de client zijn een div en een knop gegeven. Bij het klikken op de knop, stuur drie getallen naar de server met de POST-methode. Laat de server de som van de doorgegeven getallen vinden. Schrijf het resultaat in de div.