Envoyer un formulaire en Ajax avec JQuery

Les requêtes AJAX, deviennent de plus en plus populaires car les applications Web cherchent à apporter des éléments personnalisés de manière dynamique. Les requêtes AJAX sont des méthodes permettant de charger un contenu personnalisé séparément du reste du document HTML, ce qui permet la mise en cache du document HTML complet, améliorant ainsi le temps de chargement final.
 
 

Envoyer un formulaire HTML simple

Commençons par un simple formulaire HTML, puis nous pourrons écrire des codes jQuery exécutant des requêtes Ajax:

<form action="test.php" method="post" id="myForm">
    <label>Name</label>
    <input type="text" name="name" />
    <label>Address</label>
    <input type="text" name="address" />
    <input type="submit" name="submit" value="Soumettre le formulaire" />
    <div id="res"></div>
</form>

Soumettez les données du formulaire HTML à l’aide de la méthode jQuery.ajax(). La méthode ajax() est utilisée pour exécuter une requête AJAX (HTTP asynchrone).

$("#myForm").submit(function(e){
	e.preventDefault(); //empêcher une action par défaut
	var form_url = $(this).attr("action"); //récupérer l'URL du formulaire
	var form_method = $(this).attr("method"); //récupérer la méthode GET/POST du formulaire
	var form_data = $(this).serialize(); //Encoder les éléments du formulaire pour la soumission
	
	$.ajax({
		url : form_url,
		type: form_method,
		data : form_data
	}).done(function(response){ 
		$("#res").html(response);
	});
});

La méthode .serialize() sérialise les inputs du formulaire pour effectuer une requête pouvant être envoyée à l’aide de Ajax.