Soumission d’un formulaire au format JSON avec jQuery

J’ai jusque là utilisé principalement le format de données JSON pour récupérer des informations d’un quelconque service métier ou d’une API, comme récupérer les données d’un joueur ou les caractéristiques d’une carte Magic par exemple.

Cependant le format JSON se prête aussi bien à la récupération d’informations qu’à l’envoi de données, c’est sur cette deuxième option que porte la suite de ce billet.

Formulaire de contact

(Je vous renvoi à cet ancien article pour ceux qui souhaiteraient connaître une façon de retourner des données au format JSON depuis un contrôleur Java.)

Pour mettre en application l’envoi de données JSON vers un contrôleur Java, partons du principe que nous avons un formulaire de contact et que les données saisies par l’utilisateur doivent faire l’objet d’une action de sauvegarde en base de données par exemple.
La structure du formulaire de contact est la même pour les deux cas présentés ci-dessous :

• HTML

<form action="" id="formContact">
	<label for="nom">Nom</label>
	<input type="text" id="nom"/><br/>
	<label for="prenom">Prénom</label>
	<input type="text" id="prenom"/><br/>
	<label for="age">Age</label>
	<input type="text" id="age"/><br/>
	<input type="submit" value="Envoyer"/>
</form>

Envoi éparpillé

L’envoi classique correspond à envoyer les données saisies par l’utilisateur de façon unitaire, chaque champ du formulaire correspondant à un paramètre de la requête HTTP. Pour une quantité très réduite de données à envoyer cela peut suffire, mais lorsque nous parlons de dizaine voire de centaine de données, vous vous rendrez vite compte que cela nécessite trop de travail.

• JS

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
		$(document).ready(function() {
			$('#formContact').submit(function() {
				var contact = {
					nom : $('#nom').val(),
					prenom : $('#prenom').val(),
					age : $('#age').val()
				};
				$.ajax({
					type: 'POST',
					url: 'contact.do',
					data: contact,
					success: function() {
						alert("fin du traitement java");
					}
				});
				return false;
			});
		});
	</script>

• JAVA

// Récupère des données saisies par l'utilisateur
String nom = request.getParameter("nom");
String prenom = request.getParameter("prenom");
String age = request.getParameter("age");
// création de l'objet à persister en base
Contact contact = new Contact();
contact.setNom(nom);
contact.setPrenom(prenom);
contact.setAge(age);
// TODO : contrôles éventuels &  insertion en base de données

L’inconvénient de cette méthode est que les données soumises à l’aide de l’objet JavaScript ‘contact’ ne sont pas automatiquement transformées vers un objet de classe ‘Contact’ en Java, les paramètres sont à récupérer un à un, charge à nous de construire l’objet Java à la main … imaginez le travail avec des dizaines de paramètres dans tous les sens.

La deuxième méthode présentée ci-dessous permet de faciliter et d’optimiser tout ce travail.

Envoi groupé

Vous l’aurez compris, ce principe permet de convertir simplement l’objet JavaScript ‘contact’ en objet Java de classe ‘Contact’, voici les outils que l’on devra utiliser pour réussir ceci :

- l’envoi des données, côté client, se fait à présent au format JSON à l’aide d’un script JavaScript nommé json2.js
- les données reçues au format JSON, côté serveur, peuvent à présent être converties en objet Java en une ligne grâce à la librairie Json-lib

• JS

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/json2.js"></script>
    <script type="text/javascript">
		$(document).ready(function() {
			$('#formContact').submit(function() {
				var contact = {
					nom : $('#nom').val(),
					prenom : $('#prenom').val(),
					age : $('#age').val()
				};
				$.ajax({
					type: 'POST',
					url: 'contact.do',
					data: 'contact=' + JSON.stringify(contact),
					success: function() {
						alert("fin du traitement java");
					}
				});
				return false;
			});
		});
	</script>

• JAVA

// Récupère des données saisies par l'utilisateur
String contactAsString = request.getParameter("contact");
// création de l'objet à persister en base
JSONObject jsonObject = JSONObject.fromObject(contactAsString);
Contact contact = (Contact) JSONObject.toBean(jsonObject, Contact.class);
// TODO : contrôles éventuels & insertion en base de données

L’exemple simpliste de ce billet ne permet pas de se rendre compte tout à fait des possibilités offertes par l’utilisation du format JSON, étant donné que nous avons pris pour exemple un formulaire avec 3 champs très simples, mais croyez-moi l’utilisation de ce format d’échange entre le client et le serveur (dans les deux sens) est une véritable bénédiction et se fait très facilement

Cet article a été écrit par :

Mimie – qui a déjà rédigé 124 posts sur Des Geeks et des lettres.

Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !

Contacter l'auteur

Jetez aussi un oeil sur :

• jQuery : Génération d’un formulaire jetable pour l’appel d’une action Struts
• Appel AJAX avec jQuery et envoi de données JSON avec Struts
• Paypal : Ajout d’un lien au lieu d’un bouton
• Mettre en pause un carrousel au survol de la souris
• jCookies : Gestion simple des cookies avec jQuery