WEB : Formulaires asynchrone de connexion en AJAX et JSON

Introduction



Ici on va parler d’AJAX. Ce n'est pas un produit nettoyant mais l’acronyme de Asynchronous JavaScript and XML),

Quand on créé un formulaire de connexion ( comme vu dans cet article ), on a la page du formulaire, la page connexion.php qui s'affiche (même un court instant) avec bien souvent une redirection.
C'est esthétiquement moche, ou alors on affiche un message du style "Connexion OK", mais ce n'est pas très agréable pour la navigation.

Le but de cet article va être le suivant : Valider un formulaire sans passer par cette page d'action du formulaire.

Ici pas de CSS ni de style.


Arborescence utilisée



A la racine du site, 2 dossiers : fonctions et js ainsi que le forumlaire form.html
Le dossier fonctions contient action.php
Le dossier js contient jQuery : jquery-1.11.3.min.js et notre code javascript formulaires-ajax.js.

Code TEXT :
.
| fonctions
|   |-- action.php
|-- form.html
|-- js
    |-- formulaires-ajax.js
    |-- jquery-1.11.3.min.js
 


Le code



Vu que je vais utiliser des fonctions de JQuery, j'appelle jQuery précédemment téléchargé et placé dans le dossier js de mon site :

Code HTML :
<script src="js/jquery-1.11.3.min.js"></script>


J'appelle aussi le script qui contiendra mes fonctions du formulaire :

Code HTML :
<script src="js/formulaires-ajax.js"></script> 


Ensuite, voici mon formulaire (basique et classique) :

Code HTML :
<form id="connexion" action="fonctions/action.php" method="post">
  Pseudo : <input type="text" id="pseudo" name="pseudo" required="required" /><br />
  Mot de passe : <input type="password" id="mdp" name="mdp" required="required" /><br />
  <input type="submit" value="Envoyer" />
</form> 


Bien, maintenant voici le petit bout de code Javascript que je vais placer dans ma page (ou dans un fichier .js à côté (il est commenté) :
Code JAVASCRIPT :
$(document).ready(function() {
  // Action qui est exécutée quand le formulaire est envoyé ( #connexion est l'ID du formulaire)
  $('#connexion').on('submit', function(e) {
    e.preventDefault(); // On empêche de soumettre le formulaire
 
    var $this = $(this); // L'objet jQuery du formulaire
 
    // Envoi de la requête HTTP en mode asynchrone
    $.ajax({
      url: $this.attr('action'), // On récupère l'action (ici action.php)
      type: $this.attr('method'), // On récupère la méthode (post)
      data: $this.serialize(), // On sérialise les données = Envoi des valeurs du formulaire
      dataType: 'json', // JSON
      success: function(json) { // Si ça c'est passé avec succès
        // ici on teste la réponse
        if(json.reponse === 'ok') {
          alert('Connexion OK');
          // On peut aussi rediriger vers l'index
          window.location.href = 'index.php';
        } else {
          alert('Erreur : '+ json.reponse);
        }
      }
    });
 
  });
});


Enfin, on n'oublie pas de créer notre page d'action (ici action.php dans le dossier fonctions :

Le pseudo et le mot de passe sont écrits en clair mais on peut tout à fait y insérer une requête SQL.
Il est impératif que cette page ne contienne aucun "HTML" !!


Code PHP :
<?php
if(isset($_POST['pseudo']) && isset($_POST['mdp']))
{
  if(($_POST['pseudo'] != '') && ($_POST['mdp'] != '')) {
    if ( $_POST['pseudo'] == 'pseudo' && $_POST['mdp'] == 'mdp' )
    {
      $reponse = 'ok';
    }
    else
    {
      $reponse = 'Utilisateur ou mot de passe incorrect !';
    }
  }
  else
  {
    $reponse = 'Des valeurs sont vides';
  }
}
else
{
  $reponse = 'Des valeurs ne sont pas envoyées';
}
echo json_encode(['reponse' => $reponse]);
?> 


Et voilà, à vous de tester.


Cas TinyMCE



Quand on insère TinyMCE, les champs de type "textarea" envoient que des infos vides.

Il faut dans un premier temps retirer l'attribut "required" à la balise "textarea". (Cette balise est masquée donc elle sera toujours considérée comme vide puisqu'on ne la remplit pas.

Ensuite, dans le code Javascript, au début de la fonction, on insère cette ligne pour valider les informations saisies dans TinyMCE :

Code JAVASCRIPT :
tinyMCE.get("id_textarea").save(); // Nécessaire pour valider le tinymce


Ce qui donne :

Code JAVASCRIPT :
$(document).ready(function() {
  // Action qui est exécutée quand le formulaire est envoyé ( #connexion est l'ID du formulaire)
  $('#connexion').on('submit', function(e) {
    e.preventDefault(); // On empêche de soumettre le formulaire
 
    tinyMCE.get("id_textarea").save(); // Nécessaire pour valider le tinymce
 
    var $this = $(this); // L'objet jQuery du formulaire
 
    // Envoi de la requête HTTP en mode asynchrone
    $.ajax({
      url: $this.attr('action'), // On récupère l'action (ici action.php)
      type: $this.attr('method'), // On récupère la méthode (post)
      data: $this.serialize(), // On sérialise les données = Envoi des valeurs du formulaire
      dataType: 'json', // JSON
      success: function(json) { // Si ça c'est passé avec succès
        // ici on teste la réponse
        if(json.reponse === 'ok') {
          alert('Connexion OK');
          // On peut aussi rediriger vers l'index
          window.location.href = 'index.php';
        } else {
          alert('Erreur : '+ json.reponse);
        }
      }
    });
 
  });
});
Cette page a été vue 4211 fois