Stuur POST versoeke via AJAX in JavaScript

Laat ons nou 'n POST versoek na die bediener stuur. Vir hierdie doel het die funksie fetch 'n tweede parameter met instellings. In die instelling method word die HTTP versoekmetode gespesifiseer. Kom ons spesifiseer die POST metode:

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

Laat ons ook die data spesifiseer wat ons na die bediener wil stuur. In POST versoeke word data oorgedra in die liggaam van die HTTP versoek. Vir hierdie doel moet die data gespesifiseer word in die instelling body. Kom ons spesifiseer dit in die vorm van 'n Query String, en gee die ooreenstemmende MIME tipe daaraan:

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

Kom ons kry hierdie data op die bediener, doen iets daarmee en stuur dit terug:

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

Aan die kliëntkant is daar 'n div en 'n knoppie. Met 'n druk op die knoppie, stuur drie getalle na die bediener met die POST metode. Laat die bediener die som van die oorgedra getalle vind. Skryf die resultaat in die div.