Scripts et Programmation

WEB : Formulaires asynchrone de connexion en AJAX et JSON

Cet article a été mis à jour, vous consultez ici une archive de cet article!

Table des matières

Introduction
Arborescence utilisée
Le code

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
 
    // On récupère les valeurs
    var pseudo = $('#pseudo').val();
    var mdp = $('#mdp').val();
 
 
    // 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.