Comment utiliser ajax envoyer un formulaire web

Vous avez pu lire notre Guide jQuery, ainsi qu`une partie cinq de nos jQuery tutoriel sur AJAX

, mais aujourd`hui, je vais vous montrer comment utiliser AJAX pour envoyer dynamiquement un formulaire web. JQuery est de loin la meilleure façon d`utiliser AJAX, donc notre caisse commencer tutoriel si vous êtes un débutant. Débutons en.Guide de base pour JQuery pour les programmeurs javascriptGuide de base pour JQuery pour les programmeurs javascriptSi vous êtes un programmeur javascript, JQuery ce guide pour vous aider à commencer à coder comme un ninja.Lire la suite

Pourquoi utiliser AJAX

Vous demandez peut-être: « Pourquoi ai-je besoin AJAX? » HTML est parfaitement capable de formes soumission, et le fait d`une manière assez indolore. AJAX est mis en œuvre dans une grande majorité des pages Web, et sa popularité ne cesse d`augmenter.

L`énorme avantage AJAX apporte est la capacité de partiellement charger parties de pages Web. Cela rend les pages apparaissent plus rapide et plus réactif, et permet d`économiser la bande passante de seulement avoir à recharger une petite partie des données au lieu de la page. Voici quelques cas d`utilisation d`AJAX de base:

• Vérifier les nouveaux e-mails régulièrement.
• Mettre à jour un ballon de football en direct marquer toutes les 30 secondes.
• Mettre à jour le prix pour une vente aux enchères en ligne.

AJAX vous fournit, le développeur, avec une capacité presque illimitée de faire des pages Web rapide, réactif et accrocheurs - quelque chose que vos visiteurs vous remercieront.

le code HTML

Avant de commencer, vous avez besoin d`un formulaire HTML. Si vous ne savez pas ce qu`est le HTML, alors lisez notre guide comment faire un site web pour les débutants.Comment faire un site Web: pour les débutantsComment faire un site Web: pour les débutantsAujourd`hui, je vais vous guider à travers le processus de fabrication d`un site web complet à partir de zéro. Ne vous inquiétez pas si cela semble difficile. Je vais vous guider à travers chaque étape du chemin.Lire la suite

Voici le code HTML dont vous avez besoin:

lt;htmlgt;lt;têtegt;lt;scénario src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text / javascript"gt;scénariogt;lt;scénario type="text / javascript"gt;scénariogt;têtegt;lt;corpsgt;lt;forme action="un / fichier" méthode="POSTER" prénom="myForm" ça="myForm"gt;Prénom:lt;contribution type="texte" prénom="prénom"gt;Âge:lt;contribution type="texte" prénom="âge"gt;lt;contribution type="soumettre"gt;formegt;corpsgt;htmlgt;

Cette html définit une forme 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 il est une bonne idée de les utiliser, car il garantit que les visiteurs de votre site peuvent toujours l`utiliser si elles ont désactivé javascript. Cette page inclut jQuery hébergé par Google sur leur CDN. le tête contient une scénario tag - c`est où vous écrirez votre code.Qu`est-ce que CDNs Y & Pourquoi Le stockage est plus un problèmeQu`est-ce que CDNs Y & Pourquoi Le stockage est plus un problèmeCDNs faire d`Internet rapide et abordable des sites Web, même lorsque vous redimensionnez à des millions d`utilisateurs. Tout d`abord, les coûts de bande passante ceux d`entre nous d`argent sur les contrats limités savent que trop bien. Non seulement vous ...Lire la suite

Cette forme peut sembler un peu ennuyeux en ce moment, vous pouvez envisager CSS d`apprentissage pour l`animer un peu.

le javascript

Il y a plusieurs façons dont vous pouvez soumettre des formulaires avec javascript. La première et la meilleure façon de le faire est par le soumettre méthode:

document.getElementById(`MyForm`).soumettre()-

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

Video: Tutoriel jQuery - Poster un formulaire en Ajax

$(`#myForm`).soumettre()-

Cette commande indique à votre navigateur pour soumettre le formulaire, exactement comme en appuyant sur le bouton d`envoi. Il vise la forme par son identifiant, et dans ce cas, qui est myForm. Ce n`est pas AJAX, il va recharger la page entière - quelque chose qui 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 est pas utilisé lors de la présentation des formulaires en utilisant AJAX, mais peut être utilisé la même méthode.

Une grande partie du web moderne Ecoulage les requêtes GET ou POST. D`une manière générale, GET est utilisée pour récupérer des données, alors que le POST est utilisé pour envoyer des données (et renvoyer une réponse). Les données peuvent être envoyées avec GET, POST mais est presque toujours le meilleur choix - en particulier pour les données de formulaire. Vous avez peut-être vu les requêtes GET avant - ils envoient les données attachées à l`URL:

somewebsite.com/index.html?name=Joe

Le point d`interrogation indique au navigateur que toutes les données immédiatement après, il ne doit pas être utilisé pour traverser le site, mais devraient plutôt être passés par la page pour elle de traiter. Cela fonctionne bien pour des choses simples comme un numéro de page, mais il a quelques inconvénients:

Limite de caractères maximum: Il y a un nombre maximum de caractères pouvant être envoyés dans une URL. Vous ne pouvez pas avoir 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 - il 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, seulement ils ne transmettent pas les données dans l`URL. Cela signifie une plus grande quantité de données peuvent être envoyées (données est connu comme charge utile), Et une certaine sécurité est acquise par ne pas exposer les données. Les données peuvent encore être facilement accessible, donc regarder dans un certificat SSL si vous voulez une totale tranquillité d`esprit.Qu`est-ce qu`un certificat SSL, et avez-vous besoin?Qu`est-ce qu`un certificat SSL, et avez-vous besoin?Surfer sur le net peut être effrayant lorsque des renseignements personnels est impliqué.Lire la suite

Que ce soit POST ou GET est utilisé, les données sont envoyées dans clé -gt; 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 Asynchronous javascript et XML (Ajax). javascript prend en charge les appels AJAX, mais ils peuvent être source de confusion à utiliser. JQuery met en œuvre ces mêmes méthodes exactes, mais le fait d`une manière facile à utiliser. Vous pouvez demander à votre navigateur pour effectuer une requête GET ou POST - coller à POST pour cet exemple, mais les demandes GET sont effectuées d`une manière similaire.

Voici la syntaxe:

$.poster(`Some / url`, $(`#myForm`).sérialisation())-

Ce code fait plusieurs choses. La première partie ($) Permet de connaître votre navigateur que vous souhaitez utiliser jQuery pour cette tâche. La deuxième partie appelle la poster Procédé de jQuery. Vous devez passer deux paramètres- Le premier est l`URL pour envoyer les données, tandis que le second est les données. Vous trouverez peut-être (en fonction de l`URL que vous essayez d`accéder), que votre navigateur même origine la politique de sécurité peut intervenir ici. Vous pouvez activer le partage des ressources inter-origine pour contourner, mais simplement une URL pointant vers hébergé sur le même domaine que votre page est assez souvent.

Le second paramètre appelle la jQuery sérialisation méthode sur votre formulaire. Cette méthode accède toutes les données de votre formulaire, et les prépare pour la transmission - il les sérialise.

Ce code seul suffit de soumettre un formulaire, mais vous pouvez trouver des choses agissent un peu étrange. Il vaut bien étudier vos outils de développement du navigateur, car ceux-ci font le réseau de débogage demande un jeu d`enfant.

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

Video: TUTO AJAX avec JQUERY PHP HTML CSS DWM ENSET M YOUSSFI

Si vous voulez soumettre votre formulaire en utilisant AJAX lorsque le bouton vous appuyez sur Soumettre, c`est tout aussi facile. Vous devez attacher votre code à la soumettre cas de la forme. Voici le code:

$(document).sur(`soumettre`,`#myForm`,fonction(){$.poster(`Some / url`, $(`#myForm`).sérialisation())-revenir faux-})-

Ce code fait plusieurs choses. Lorsque votre formulaire est soumis, votre navigateur vient et exécute le code premier. Votre code soumet ensuite les données de formulaire en utilisant AJAX. La dernière étape nécessaire est d`empêcher la forme originale de soumettre - vous l`avez déjà fait avec AJAX, de sorte que vous ne voulez pas que cela se reproduise!

Si vous souhaitez effectuer une autre tâche une fois que l`AJAX est terminée (ou peut-être revenir, même 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:

$.poster(`Url`, $(`#myForm`).sérialisation(), fonction(résultat) {console.bûche(résultat)-}

le résultat argument contient des données renvoyées par l`URL des données a été envoyé. Vous pouvez facilement répondre à ces données:

Video: Contact Form Web Application Tutorial Ajax HTML5 PHP

si(résultat == `Succès`) {// faire une tâche}autre {// faire une autre tâche}

Voilà pour ce poste. Nous espérons que vous avez maintenant une bonne compréhension des requêtes HTTP et comment fonctionne AJAX dans le contexte d`une forme.

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