Méthodes d'envoi de formulaires en JavaScript

Les formulaires peuvent être envoyés de deux manières : par la méthode GET ou par la méthode POST. La méthode d'envoi du formulaire est définie par l'attribut method du formulaire.

Par exemple, spécifions la méthode d'envoi GET pour un formulaire :

<form action="/handler/" method="GET">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Et maintenant la méthode POST :

<form action="/handler/" method="POST">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Voyons maintenant la différence entre les deux méthodes d'envoi. Dans le cas de la méthode GET, les données du formulaire seront visibles dans le navigateur sous la forme de ce qu'on appelle une chaîne de paramètres (query string), représentant des paires de type clé-valeur, où la clé sera le nom de l'élément du formulaire, et la valeur - les données saisies. De plus, les paires de valeurs seront séparées par des esperluettes.

Les données envoyées par la méthode GET arriveront sur notre serveur dans la propriété get de l'objet de données :

export default {
	'/handler/': function(data) {
		console.log(data.get); // s'affichera dans la console du serveur
		return 'form data received';
	}
}

Et les données envoyées par la méthode POST arriveront sur notre serveur dans la propriété post de l'objet de données :

export default {
	'/handler/': function(data) {
		console.log(data.post); // s'affichera dans la console du serveur
		return 'form data received';
	}
}

Pour faire court, on peut utiliser la déstructuration pour obtenir nos données dans une variable séparée :

export default {
	'/handler/': function({get, post}) {
		console.log(get);
		console.log(post);
		return 'form data received';
	}
}