Comment utiliser AJAX pour envoyer un formulaire Web

Publicité

Vous avez peut-être lu notre Guide jQuery Un guide de base de JQuery pour les programmeurs JavascriptSi vous êtes un programmeur Javascript, ce guide de JQuery vous aidera à commencer à coder comme un ninja. Lire la suite , ainsi que la cinquième partie de notre Tutoriel jQuery sur AJAX Tutoriel jQuery (Partie 5): AJAX les tous!Alors que nous approchons de la fin de notre mini-série de didacticiels jQuery, il est temps que nous jetions un coup d'œil plus approfondi sur 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 dynamiquement un formulaire Web. JQuery est de loin le moyen le plus simple d'utiliser AJAX, alors consultez notre tutoriel de mise en route Tutoriel jQuery - Prise en main: bases et sélecteursLa semaine dernière, j'ai parlé de l'importance de jQuery pour tout développeur Web moderne et pourquoi il 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. Commençons.

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 d'une manière assez indolore. AJAX est implémenté dans une grande majorité de pages Web et sa popularité continue d'augmenter.

L'énorme avantage qu'AJAX apporte est la capacité de charger partiellement parties de pages Web. Cela rend les pages plus rapides et plus réactives, et économise 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 les nouveaux e-mails.
• Mettez à jour un score de football en direct toutes les 30 secondes.
• Mettez à jour le prix d'une vente aux enchères en ligne.

AJAX vous offre, en tant que développeur, une capacité presque illimitée à rendre des pages Web rapides, réactives et rapides - quelque chose que 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 comment créer un site web pour débutants Comment créer un site Web: pour les débutantsAujourd'hui, je vais vous guider à travers le processus de création d'un site Web complet à partir de zéro. Ne vous inquiétez pas si cela vous semble difficile. Je vais vous guider à travers chaque étape du processus. Lire la suite .

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 Quels sont les CDN et pourquoi le stockage n'est plus un problèmeLes CDN rendent Internet rapide et les sites Web abordables même lorsque vous vous adaptez à 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 très 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 sembler un peu ennuyeux en ce moment, vous pouvez donc envisager apprentissage CSS 5 étapes pour apprendre le CSS et devenir un sorcier Kick-Ass CSSLe CSS est le changement le plus important des pages Web au cours de la dernière décennie, et il a ouvert la voie à la séparation du style et du contenu. De façon moderne, XHTML définit la structure sémantique ... Lire la suite pour l'animer un peu.

Le JavaScript

Il existe plusieurs façons de soumettre des formulaires avec JavaScript. La première et la plus simple méthode consiste à utiliser 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 en appuyant sur le bouton Soumettre. 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 le méthode attribut de votre formulaire, vous avez précisé comment soumettre le formulaire. Cela peut être PUBLIER ou AVOIR. 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. D'une 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 demandes GET - ils envoient les données jointes à l'URL:

somewebsite.com/index.html? nom = 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 être traitées. Cela fonctionne bien pour des choses simples comme un numéro de page, mais il présente certains inconvénients:

Limite maximale de caractères: Un nombre maximum de caractères peut être envoyé dans une URL. Vous n'en aurez 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 demande 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 manière similaire, mais 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 acquise en n'exposant pas les données. Cependant, les données sont toujours facilement accessibles. Certificat SSL Qu'est-ce qu'un certificat SSL et en avez-vous besoin?La navigation sur Internet peut être effrayante lorsque des informations personnelles sont impliquées. Lire la suite si vous voulez une tranquillité d'esprit totale.

Que POST ou GET soit utilisé, les données sont envoyées clé -> valeur paires. Dans l'URL ci-dessus, la clé est Nomet 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 ces mêmes méthodes, mais le fait de manière simple à utiliser. Vous pouvez demander à votre navigateur d'effectuer une requête GET ou POST - respectez POST pour cet exemple, mais les requêtes GET sont effectué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 Publier méthode de jQuery. Vous devez passer deux paramètres; La première est l'URL à laquelle envoyer les données, tandis que la seconde est les données. Vous pouvez constater (en fonction de l'URL à laquelle vous tentez d'accéder) que votre navigateur même origine la politique de sécurité peut interférer ici. Vous pouvez activer partage de ressources d'origine croisée pour contourner cela, il suffit souvent de pointer simplement vers une URL hébergée sur le même domaine que votre page.

Le deuxième paramètre appelle jQuery sérialiser 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. Il vaut la peine d'étudier les outils de développement de votre navigateur, car ils facilitent le débogage des demandes réseau.

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

Si vous souhaitez envoyer votre formulaire à l'aide d'AJAX lorsque vous appuyez sur le bouton Soumettre, c'est tout aussi simple. Vous devez joindre votre code au soumettre événement du formulaire. Voici le code:

$ (document) .on ('submit', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); retour 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 l'envoi 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 rappeler. JQuery les rend très faciles à utiliser - passez simplement une fonction comme un autre paramètre comme celui-ci:

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

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. }

C'est tout pour ce post. 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 utilisez-vous AJAX avec des formulaires? Faites-nous part de vos réflexions dans les commentaires ci-dessous!

Crédits image: vectorfusionart / Shutterstock