Envoi de formulaires en JavaScript

Vous savez déjà travailler avec les éléments de formulaires en JavaScript, en les traitant dans le navigateur. Les formulaires, cependant, peuvent également être envoyés au serveur pour être traités par la partie serveur du site, écrite en PHP ou NodeJS.

Cela est nécessaire pour ajouter et modifier les données du site stockées sur le serveur.

Voyons comment cela se fait. Supposons que nous ayons plusieurs champs de saisie et un bouton :

<input>
<input>
<input type="submit">

Enveloppons nos éléments dans la balise form. Dans ce cas, nous obtiendrons un formulaire qui sera envoyé au serveur lors du clic sur le bouton :

<form>
	<input>
	<input>
	<input type="submit">
</form>

Pour que le serveur puisse récupérer les données du formulaire, il est nécessaire de donner un nom à chaque champ :

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Dans ce cas, les données du formulaire arriveront sur le serveur sous forme de paires clé-valeur, où les clés seront les noms des éléments du formulaire, et les valeurs - les données saisies.

Pour envoyer le formulaire, aucun serveur n'est nécessaire. Vous pouvez copier le code de formulaire fourni dans n'importe quel fichier, l'exécuter dans le navigateur et cliquer sur le bouton d'envoi - le formulaire sera envoyé et la page du navigateur sera rechargée.

En l'absence de serveur, cependant, les données du formulaire n'iront nulle part. Alors, vérifions le fonctionnement du formulaire avec un serveur. Pour l'instant, vous ne connaissez aucun langage serveur, alors entraînons-nous à envoyer le formulaire avec l'aide de notre serveur HTTP pédagogique.

Plaçons notre formulaire dans un certain fichier de manière à ce qu'il soit accessible à l'adresse http://localhost:3001/form.html :

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Ajoutons à notre formulaire l'attribut action, indiquant l'adresse d'envoi de notre formulaire :

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

Maintenant, dans le fichier server.js, écrivons le gestionnaire de l'adresse d'envoi du formulaire :

export default {
	'/handler/': function() {
		return 'form data received';
	}
}

Les données du formulaire envoyées arriveront dans le paramètre de notre gestionnaire :

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

Créez un formulaire et un fichier pour son traitement. Envoyez le formulaire et vérifiez que les données sont bien arrivées sur le serveur.