Comment utiliser AJAX pour envoyer un formulaire Web

Vous avez peut-être lu notre guide jQuery Un guide de base des programmeurs JQuery pour Javascript Un guide de base des programmeurs JQuery pour Javascript Si vous êtes un programmeur Javascript, ce guide de JQuery vous aidera à coder comme un ninja. En savoir plus, ainsi que la cinquième partie de notre didacticiel jQuery sur AJAX Didacticiel jQuery (partie 5): AJAX, tous! jQuery Tutorial (Part 5): AJAX, eux tous! Alors que nous approchons de la fin de notre série de mini-didacticiels jQuery, il est temps que nous examinions plus en détail l'une des fonctionnalités les plus utilisées de jQuery. AJAX permet à un site Web de communiquer avec… Lire la suite, mais aujourd'hui, je vais vous montrer comment utiliser AJAX pour envoyer de manière dynamique un formulaire Web. JQuery est de loin le moyen le plus simple d'utiliser AJAX. Découvrez notre tutoriel d'initiation Tutoriel jQuery - Mise en route: principes de base et sélecteurs Tutoriel jQuery - Mise en route: principes de base et sélecteurs La semaine dernière, j'ai expliqué l'importance de jQuery pour tout développeur Web moderne. et pourquoi c'est génial. Cette semaine, je pense qu'il est temps de nous salir les mains avec du code et d'apprendre comment… Lire la suite si vous êtes débutant. Faisons un saut dans.

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 relativement simple. AJAX est implémenté dans une grande majorité de pages Web et sa popularité ne cesse de croître.

L’énorme avantage apporté par AJAX est sa capacité à charger partiellement parties de pages Web. Cela rend les pages plus rapides et plus réactives, et permet d'économiser de la bande passante en n'ayant à recharger qu'une petite partie des données au lieu de la totalité de la page. Voici quelques cas d'utilisation de base d'AJAX:

• Vérifier les nouveaux emails régulièrement.
• 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, à vous le développeur, une capacité presque illimitée de créer des pages Web rapides, réactives et accrocheuses - une chose pour laquelle 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. Comment créer un site Web: pour les débutants. Comment créer un site Web: pour les débutants aujourd'hui. Je vous guiderai tout au long du processus de création. un site complet à partir de zéro. Ne vous inquiétez pas si cela semble difficile. Je vous guiderai à travers chaque étape du processus. Lire la suite .

Voici le code HTML dont vous avez besoin:

       
 Prénom:  Âge:   
   

Ce code 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'il a désactivé JavaScript. Cette page inclut jQuery hébergé par Google sur leur CDN. Qu'est-ce que les CDN et pourquoi le stockage n'est plus un problème? Qu'est-ce que les CDN sont et pourquoi le stockage n'est plus un problème? Les CDN rendent Internet rapide et les sites Web abordables, même lorsque vous êtes connectés à des millions d'utilisateurs. Premièrement, la bande passante coûte de l'argent. ceux d'entre nous qui ont des contrats limités le savent trop bien. Non seulement vous… Lire la suite. le tête contient un scénario tag - c'est ici que vous écrirez votre code.

Ce formulaire peut paraître un peu ennuyeux pour le moment. Vous voudrez peut-être envisager l'apprentissage de CSS 5 pas de bébé vers l'apprentissage du CSS et le fait de devenir un kick-ass CSS CSS 5 pas de bébé pour apprendre le CSS et de devenir un kick-ass CSS Le CSS est le single Les changements les plus importants survenus sur les pages Web au cours de la dernière décennie ont ouvert la voie à la séparation du style et du contenu. De manière moderne, XHTML définit la structure sémantique… Lire la suite pour l’animer un peu.

Le javascript

Vous pouvez soumettre des formulaires avec JavaScript de plusieurs manières. Le premier et le plus simple moyen de le faire est de 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 d'envoi. Il cible la forme par son identifiant, et dans ce cas, c'est ma forme. Ce n'est pas AJAX, donc il va recharger la page entière - quelque chose qui n'est pas toujours souhaitable.

dans le méthode attribut de votre formulaire, vous avez spécifié comment soumettre le formulaire. Cela peut être POSTER 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 exécutée à partir de requêtes GET ou POST. En règle 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:

somewebsite.com/index.html?name=Joe

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

Limite maximale de caractères: Il existe un nombre maximal de caractères pouvant être envoyés dans une URL. Vous n'en avez peut-être pas assez si vous essayez d'envoyer une grande quantité de données.
Visibilité: Tout le monde 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 demandes POST fonctionnent de la même manière, sauf qu'elles n'envoient pas les données de 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 néanmoins facilement accessibles. Consultez donc un certificat SSL. Qu'est-ce qu'un certificat SSL et en avez-vous besoin d'un? Qu'est-ce qu'un certificat SSL et en avez-vous besoin? Naviguer sur Internet peut être effrayant lorsque des informations personnelles sont impliquées. Lire plus si vous voulez une tranquillité d'esprit totale.

Que l'on utilise POST ou GET, les données sont envoyées clé -> valeur paires. Dans l'URL ci-dessus, la clé est prénom, 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 leur utilisation peut être déroutante. JQuery implémente exactement les mêmes méthodes, mais de manière simple. Vous pouvez demander à votre navigateur d'effectuer une demande GET ou POST - respectez-le pour POST pour cet exemple, mais les demandes GET sont exécutées de manière similaire..

Voici la syntaxe:

$ .post ('certains / 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 poster méthode de jQuery. Vous devez passer dans deux paramètres; La première est l'URL à laquelle envoyer les données, tandis que la seconde est la donnée. Vous pouvez trouver (en fonction de l’URL que vous essayez d’accéder), que les navigateurs même origine la politique de sécurité peut interférer ici. Vous pouvez activer le partage de ressources d'origine croisée pour y remédier, mais il suffit souvent de pointer vers une URL hébergée sur le même domaine que votre page.

Le second paramètre appelle le jQuery sérialiser 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 que les choses agissent un peu étrangement. Il vaut la peine d’examiner les outils de développement de votre navigateur, car ils facilitent grandement le débogage des requêtes réseau..

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

Si vous souhaitez soumettre votre formulaire en utilisant AJAX lorsque vous cliquez sur le bouton Envoyer, c'est tout aussi simple. Vous devez attacher votre code au soumettre événement de la forme. Voici le code:

$ (document) .on ('submit', '# myForm', function () $ .post ('un / url', $ ('# monForm'). serialize ()); return false;);

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 qu'AJAX est terminé (ou peut-être même renvoyer un message d'état), vous devez utiliser un rappeler. JQuery rend ces très facile à utiliser - il suffit de passer une fonction comme un autre paramètre comme celui-ci:

$ .post ('url', $ ('# monForm'). serialize (), fonction (résultat) 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 else // faire une autre tâche 

Voilà pour ce post. J'espère que vous avez maintenant une bonne compréhension des requêtes HTTP et du fonctionnement d'AJAX dans le contexte d'un formulaire..

Avez-vous appris de nouveaux tours aujourd'hui? Comment utilisez-vous AJAX avec les formulaires? Faites-nous savoir vos pensées dans les commentaires ci-dessous!

Crédits d'image: vectorfusionart / Shutterstock

En savoir plus sur: JavaScript, jQuery, développement Web.