Combien de fois avez-vous rencontré le fait que vous avez saisi des données incorrectes, à cause desquelles la page s'est rechargée et a complètement supprimé les caractères saisis dans les champs. Pour résoudre ce problème, il existe une approche assez populaire pour créer une interface utilisateur, et son nom est ajax. Il apparaît dans de nombreux projets et est utilisé de plusieurs façons.
Envoi d'un formulaire ajax: connexion des bibliothèques
Inclure la bibliothèque jquery dans index.php.
Il existe une autre façon d'inclure jquery dans un document. Vous devez télécharger la bibliothèque depuis le site officiel de jquery, la placer dans le bon dossier et y coller le lien comme ceci:
Connexion et configuration de documents
1. Créez un document.php dans le dossier avec le site avec n'importe quel nom qui vous convient - cela enverra le formulaire ajax php. Vous pouvez y écrire dans quel format le texte avec le message sera affiché. Par exemple, form1.php.
2. Dans votre dossier de fichiers javascript, créez un fichier.js avecn'importe quel nom pratique. Par exemple, form.js.
3. Connectez ce dossier à votre document.
4. Créez un formulaire avec les paramètres suivants:
Dedans, n'oubliez pas de créer des champs pour saisir vos données.
5. Allez dans le fichier form1.php dans le répertoire du site, dans lequel écrivez:
Maintenant, lors de la soumission du formulaire, le navigateur affichera des informations sur les données.
Dans le même fichier, vous pouvez écrire exactement ce qui sera affiché ou comment. Vous pouvez également écrire des cycles ou des algorithmes ici.
Envoi du formulaire ajax jquery
1. Dans le fichier form.js créé, vous devez écrire le code chargé de faire fonctionner le fichier après le chargement complet de la page du site.
$(document).ready(function(){ //Notre prochain code s'exécutera ici });
2. Ensuite, vous devez personnaliser le bouton d'envoi. Faites tout dans le même fichier.
$("form").submit(function(event) { event.preventDefault(); //le code suivant sera écrit ici });
La première partie du code est responsable de la sélection de l'élément sur la page, et la seconde est responsable d'empêcher l'action par défaut.
3. Ensuite, par exemple, prenez une soumission de formulaire ajax en cas de succès.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Ce qui suit sont des descriptions détaillées de chaque paramètre.
- type -c'est le type de demande qui est soumis dans le formulaire; puisqu'il en coûte POST, le type de requête sera approprié;
- this - sélection d'éléments à l'intérieur de la construction;
- attr - abréviation d'attraction (attraction), c'est-à-dire qu'un certain paramètre de la cible sélectionnée (forme) est attiré;
- url - paramètre responsable de l'endroit où la demande sera envoyée; dans ce cas, ce qui est écrit dans les paramètres du formulaire (form1.php);
- data - spécifie les données du formulaire;
- contentType - responsable de l'envoi des en-têtes au serveur; dans ce cas, il n'est pas nécessaire;
- cache - responsable de la sauvegarde du cache de l'utilisateur;
- processData - responsable de la conversion des données en chaîne;
- success - affiche le résultat d'une soumission de données réussie; par conséquent, si l'envoi de données a réussi, les actions de la fonction sont exécutées.
4. Terminé, maintenant lors de la soumission du formulaire ajax, vous recevrez des données sans actualiser la page.
Le résultat peut être modifié à l'aide du fichier form1.php, où vous pouvez spécifier exactement ce qui sera affiché comme résultat. Par exemple, Vous pouvez expérimenter et créer une vérification de l'exactitude de la saisie de certaines données: si les données ne sont pas correctes, le message souhaité s'affiche, sinon il redirige vers la bonne page. Beaucoup d'autres choses sont également possibles, selon vos envies.
Il envoie également des données au serveur de manière asynchrone. C'est lorsque l'utilisateur saisit du texte, et il est immédiatement surligné en rouge, indiquant que les données saisies ne sont pas correctes. À ce sujetil existe de nombreux manuels sur Internet, où tout est clairement expliqué et illustré avec des exemples.
Conclusion
Ajax est sans aucun doute un outil utile dans la création de sites Web. Pour faire des pages et des interfaces de haute qualité, c'est tout simplement nécessaire. Il est à noter qu'il est très important de connaître jQuery pour bien comprendre l'image et ce qui est écrit dans le code, car un simple copier-coller ne peut pas toujours aider et vous apprendre à comprendre le code. Il est toujours utile de se rappeler que les versions linguistiques sont mises à jour et que certaines fonctionnalités peuvent tout simplement disparaître. Par conséquent, toutes les solutions ne sont pas pertinentes, souvent le code écrit ne fonctionne tout simplement pas ou ne produit pas le résultat que vous aimeriez voir sur votre écran.
