Scripts et Programmation

WEB : Formulaires asynchrone de connexion en AJAX et JSON

Table des matières

Introduction
Arborescence utilisée
Le code
Cas TinyMCE

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.

Il est recommandé d'utiliser ces pages sur un serveur web avec HTTPS afin de ne pas se faire intercepter le mot de passe en clair !

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
session_start(); // Si on utilise les sessions, important au début de la page (ou dans un include)
if(isset($_POST['pseudo']) && isset($_POST['mdp']))
{
  if(($_POST['pseudo'] != '') && ($_POST['mdp'] != '')) {
    // Récupération du pseudo et mot de passe dans une base de données. Exemple ici en dur évidemment
    // Il est nécessaire d'échapper les caractères spéciaux si besoin ici afin d'éviter une injection SQL dans le contexte SQL.
    if ( $_POST['pseudo'] == 'pseudo' && $_POST['mdp'] == 'mdp' )
    {
      // Créer la session, le cookie ou autre ici
      $_SESSION['connecte']=1;
      $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);
        }
      }
    });
  });
});