Senden von POST-Anfragen über AJAX in JavaScript

Lassen Sie uns nun eine POST-Anfrage an den Server senden. Dafür hat die Funktion fetch einen zweiten Parameter mit Einstellungen. In der Einstellung method wird die HTTP-Anfragemethode angegeben. Geben wir die POST-Methode an:

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

Lassen Sie uns auch die Daten angeben, die wir an den Server senden möchten. In POST-Anfragen werden Daten im Body der HTTP-Anfrage übertragen. Dafür müssen die Daten in der Einstellung body angegeben werden. Geben wir sie als Query String an, indem wir ihren Typ entsprechend dem MIME-Typ setzen:

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

Lassen Sie uns diese Daten auf dem Server empfangen, etwas mit ihnen machen und sie zurücksenden:

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

Auf dem Clienten sind ein Div und ein Button vorhanden. Bei Klick auf den Button senden Sie drei Zahlen per POST-Methode an den Server. Der Server soll die Summe der übermittelten Zahlen ermitteln. Das Ergebnis schreiben Sie in das Div.