POST kérések küldése AJAX-on keresztül JavaScriptben

Most küldjünk a szerverre egy POST kérést. Ehhez a fetch függvénynek van egy második paramétere a beállításokkal. A method beállításban adható meg a HTTP kérés metódusa. Állítsuk be a POST metódust:

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

Adjunk meg adatokat is, amelyeket el szeretnénk küldeni a szerverre. POST kérésekben az adatokat a HTTP kérés törzsében (body) küldjük. Ehhez az adatokat a body beállításban kell megadni. Adjunk meg Query String formátumban, beállítva a megfelelő MIME típust:

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

Kapjuk meg ezeket az adatokat a szerveren, csináljunk velük valamit, és küldjük vissza őket:

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

A kliens oldalon adott egy div és egy gomb. A gomb megnyomásakor küldjön három számot a szerverre POST metódussal. A szerver keresse meg az átadott számok összegét. Az eredményt írja a div-be.