Si vous avez suivi notre guide sur jQuery ou notre tutoriel AJAX, vous êtes prêt à découvrir comment soumettre dynamiquement un formulaire web via AJAX. jQuery simplifie grandement cette tâche, idéale pour les débutants. Commençons !
Pourquoi choisir AJAX alors que les formulaires HTML fonctionnent parfaitement ? AJAX est omniprésent sur le web et sa popularité explose.
L'avantage clé d'AJAX réside dans le chargement partiel des pages. Cela accélère les sites, améliore la réactivité et économise la bande passante en ne rechargeant que les données nécessaires. Exemples courants :
AJAX offre aux développeurs des possibilités infinies pour créer des expériences web fluides et dynamiques, au grand plaisir des utilisateurs.
Pour démarrer, créez un formulaire HTML simple. Si vous débutez, consultez notre guide pour créer un site web.
Voici le code essentiel :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Votre code JavaScript ici
</script>
</head>
<body>
<form action="un/fichier" method="POST" name="monFormulaire" id="monFormulaire">
Nom :<br>
<input type="text" name="nom"><br>
Âge :<br>
<input type="text" name="age"><br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Ce formulaire inclut les attributs action et method pour une compatibilité sans JavaScript. jQuery est chargé via le CDN Google. Personnalisez-le avec du CSS pour un rendu attractif.
Plusieurs méthodes existent pour soumettre un formulaire en JavaScript. La plus basique est submit() :
document.getElementById('monFormulaire').submit();Ou avec jQuery :
$('#monFormulaire').submit();Cela recharge la page entière, ce qui n'est pas AJAX. Privilégiez POST pour envoyer des données (vs GET pour récupérer). GET appende les données à l'URL (ex. : unsiteweb.com/index.html?nom=Joe), mais limite les caractères et expose les données sensibles.
POST envoie une charge utile sécurisée (bien que SSL recommandé). Les données sont en paires clé-valeur.
Avec jQuery, utilisez :
$.post('votre/url', $('#monFormulaire').serialize());serialize() prépare les données du formulaire. Testez avec les outils dev du navigateur ou Postman.
Pour AJAX au clic sur soumettre :
$(document).on('submit', '#monFormulaire', function() {
$.post('votre/url', $('#monFormulaire').serialize());
return false;
});Le return false; bloque la soumission classique.
Ajoutez un callback pour traiter la réponse :
$.post('votre/url', $('#monFormulaire').serialize(), function(resultat) {
console.log(resultat);
if (resultat == 'success') {
// Action succès
} else {
// Action erreur
}
});Maîtrisez maintenant les requêtes HTTP et AJAX pour formulaires ! Partagez vos retours en commentaires.
Crédits image : vectorfusionart/Shutterstock
[]