Comment utiliser AJAX pour envoyer un formulaire Web

Vous avez peut-être lu notre guide jQuery, ainsi que la cinquième partie de notre tutoriel jQuery sur AJAX, mais aujourd'hui je vais vous montrer comment utiliser AJAX pour envoyer dynamiquement un formulaire web. JQuery est de loin le moyen le plus simple d'utiliser AJAX, alors consultez notre tutoriel de démarrage si vous êtes débutant. Allons-y.

Pourquoi utiliser AJAX

Vous vous demandez peut-être "Pourquoi ai-je besoin d'AJAX ?" HTML est parfaitement capable de soumettre des formulaires et le fait de manière assez indolore. AJAX est implémenté dans une grande majorité de pages Web et sa popularité ne cesse d'augmenter.

L'énorme avantage d'AJAX est la possibilité de charger partiellement parties de pages Web. Cela rend les pages plus rapides et plus réactives, et économise de la bande passante en n'ayant à recharger qu'une petite partie des données au lieu de la page entière. Voici quelques cas d'utilisation de base d'AJAX :

• Vérifiez régulièrement l'arrivée de nouveaux e-mails.
• Mettre à jour un score de football en direct toutes les 30 secondes.
• Mettre à jour le prix d'une enchère en ligne.

AJAX vous offre, en tant que développeur, une capacité presque illimitée à créer des pages Web rapides, réactives et dynamiques, ce dont vos visiteurs vous remercieront.

Le HTML

Avant de commencer, vous avez besoin d'un formulaire HTML. Si vous ne savez pas ce qu'est le HTML, lisez notre guide sur la création d'un site Web pour les débutants.

Voici le code HTML dont vous avez besoin :

 
  
  
  
  
  
  
  
 
 
 Nom:
  
 Âge:
  
  
  
  
  
  

Ce html définit un formulaire avec quelques éléments. Remarquez comment il y a action et méthode les attributs. Ceux-ci définissent où et comment le formulaire est soumis. Ils ne sont pas nécessaires lorsque vous utilisez AJAX, mais c'est une bonne idée de les utiliser, car cela garantit que les visiteurs de votre site Web peuvent toujours l'utiliser s'ils ont désactivé JavaScript. Cette page inclut jQuery hébergé par Google sur leur CDN. La tête contient un script tag -- c'est ici que vous écrirez votre code.

Ce formulaire peut sembler un peu ennuyeux en ce moment, vous pouvez donc envisager d'apprendre le CSS pour l'égayer un peu.

Le JavaScript

Il existe plusieurs façons de soumettre des formulaires avec JavaScript. La première et la plus simple façon de le faire consiste à soumettre méthode :

document.getElementById('myForm').submit(); 

Vous pouvez bien sûr cibler le formulaire avec jQuery si vous préférez -- cela ne fait aucune différence :

$('#myForm').submit(); 

Cette commande indique à votre navigateur de soumettre le formulaire, exactement comme si vous appuyiez sur le bouton de soumission. Il cible le formulaire par son identifiant, et dans ce cas, c'est myForm . Ce n'est pas AJAX, donc il rechargera toute la page -- quelque chose qui n'est pas toujours souhaitable.

Dans la méthode attribut de votre formulaire, vous avez spécifié comment soumettre le formulaire. Cela peut être POST ou OBTENIR . Cet attribut n'est pas utilisé lors de la soumission de formulaires à l'aide d'AJAX, mais la même méthode peut être utilisée.

Une grande partie du Web moderne est gérée par des requêtes GET ou POST. De manière générale, GET est utilisé pour récupérer des données, tandis que POST est utilisé pour envoyer des données (et renvoyer une réponse). Les données peuvent être envoyées avec GET, mais POST est presque toujours le meilleur choix - en particulier pour les données de formulaire. Vous avez peut-être déjà vu des requêtes GET ; elles envoient les données jointes à l'URL :

unsiteweb.com/index.html?name=Joe 

Le point d'interrogation indique au navigateur que les données qui le suivent immédiatement ne doivent pas être utilisées pour parcourir le site Web, mais doivent plutôt être transmises à la page pour qu'elles soient traitées. Cela fonctionne bien pour des choses simples comme un numéro de page, mais il y a quelques inconvénients :

Limite maximale de caractères : Il y a un nombre maximum de caractères qui peuvent être envoyés dans une URL. Vous n'en aurez peut-être pas assez si vous essayez d'envoyer une grande quantité de données.

Visibilité : N'importe qui peut voir les données envoyées dans une requête GET -- ce n'est pas bon pour les données sensibles telles que les mots de passe ou les données de formulaire.

Les requêtes POST fonctionnent de la même manière, sauf qu'elles n'envoient pas les données dans l'URL. Cela signifie qu'une plus grande quantité de données peut être envoyée (les données sont appelées charge utile ), et une certaine sécurité est obtenue en n'exposant pas les données. Les données restent cependant facilement accessibles, alors envisagez un certificat SSL si vous voulez une tranquillité d'esprit totale.

Que POST ou GET soit utilisé, les données sont envoyées en clé -> valeur paires. Dans l'URL ci-dessus, la clé est name , et la valeur est Joe .

La meilleure façon de soumettre des formulaires est d'utiliser JavaScript et XML asynchrones (AJAX). JavaScript prend en charge les appels AJAX, mais ils peuvent être déroutants à utiliser. JQuery implémente exactement ces mêmes méthodes, mais le fait d'une manière facile à utiliser. Vous pouvez demander à votre navigateur d'effectuer une requête GET ou POST -- tenez-vous en à POST pour cet exemple, mais les requêtes GET sont exécutées de la même manière.

Voici la syntaxe :

$.post('some/url', $('#myForm').serialize()); 

Ce code fait plusieurs choses. La première partie ($ ) indique à votre navigateur que vous souhaitez utiliser jQuery pour cette tâche. La deuxième partie appelle le post méthode de jQuery. Vous devez passer deux paramètres ; Le premier est l'URL à laquelle envoyer les données, tandis que le second est les données. Vous pouvez constater (en fonction de l'URL à laquelle vous essayez d'accéder) que vos navigateurs sont de même origine la politique de sécurité peut interférer ici. Vous pouvez activer le partage de ressources cross-origin pour contourner ce problème, mais il suffit souvent de pointer vers une URL hébergée sur le même domaine que votre page.

Le deuxième paramètre appelle le jQuery serialize méthode sur votre formulaire. Cette méthode accède à toutes les données de votre formulaire et les prépare pour la transmission :elle les sérialise.

Ce code suffit à lui seul pour soumettre un formulaire, mais vous pouvez trouver les choses un peu étranges. Cela vaut la peine d'étudier les outils de développement de votre navigateur, car ils facilitent le débogage des requêtes réseau.

Alternativement, Postman est un excellent outil gratuit pour tester les requêtes HTTP.

Si vous souhaitez soumettre votre formulaire en utilisant AJAX lorsque le bouton de soumission est enfoncé, c'est tout aussi simple. Vous devez joindre votre code au submit événement du formulaire. Voici le code :

$(document).on('submit','#myForm',function(){ 
 $.post('some/url', $('#myForm').serialize()); 
 retourner faux ; 
 }); 

Ce code fait plusieurs choses. Lorsque votre formulaire est soumis, votre navigateur vient et exécute votre code en premier. Votre code soumet ensuite les données du formulaire à l'aide d'AJAX. La dernière étape requise consiste à empêcher la soumission du formulaire d'origine -- vous l'avez déjà fait avec AJAX, vous ne voulez donc pas que cela se reproduise !

Si vous souhaitez effectuer une autre tâche une fois l'AJAX terminé (ou peut-être même renvoyer un message d'état), vous devez utiliser un rappel . JQuery les rend très faciles à utiliser -- il suffit de passer une fonction comme autre paramètre comme ceci :

$.post('url', $('#myForm').serialize(), function(result) { 
 console.log(résultat); 
 } 

Le résultat L'argument contient toutes les données renvoyées par l'URL à laquelle les données ont été envoyées. Vous pouvez facilement répondre à ces données :

if(result =='success') { 
 // faire une tâche 
 } 
 autre { 
 // faire une autre tâche 
 } 
  

C'est tout pour ce poste. J'espère que vous avez maintenant une solide compréhension des requêtes HTTP et du fonctionnement d'AJAX dans le contexte d'un formulaire.

Avez-vous appris de nouvelles astuces aujourd'hui ? Comment utiliser AJAX avec des formulaires ? Faites-nous part de vos réflexions dans les commentaires ci-dessous !

Crédits image :vectorfusionart/Shutterstock