POST-pyyntöjen lähettäminen AJAXin kautta JavaScriptissä

Lähetetään nyt palvelimelle POST-pyyntö. Tätä varten funktiolla fetch on toinen parametri asetuksia varten. Asetuksessa method määritetään HTTP-pyynnön metodi. Määritetään POST-metodi:

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

Määritetään myös data, jonka haluamme lähettää palvelimelle. POST-pyynnöissä data välitetään HTTP-pyynnön rungossa. Tätä varten data on määritettävä asetuksessa body. Määritetään se Query String -muodossa, antamille niille vastaavan MIME-tyypin:

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

Saadaan nämä data palvelimella, tehdään niillä jotain ja lähetetään ne takaisin:

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

Asiakaspuolella on div ja painike. Painiketta painettaessa lähetä palvelimelle kolme numeroa POST-menetelmällä. Palvelimen tulee löytää lähetettyjen numeroiden summa. Tulos kirjoitetaan diviin.