Voilà un petit tutoriel pour utiliser l’API JQuery et la soumission de formulaire via l’Ajax.

Tout d’abord : le principe. Nous somme sur un formulaire en PHP (le langage importe peu pour comprendre le principe). Lors de la soumission de ce formulaire, nous ne voulons pas que la page soit rechargée. C’est la raison pour laquelle nous allons utiliser la technologie AJAX.
Mais avant tout voici un petit exemple.

Inventaire des fichiers

L’exemple sera composé de 3 fichiers:

  • Le formulaire (index.php)
  • Traitement javascript (ajax.js)
  • Le fichier PHP de traitement (action.php)

Le formulaire

Nous allons faire simple : un petit formulaire de connexion avec un identifiant et un mot de passe.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Soumettre un formulaire en ajax via JQuery</title>
        <script type="text/javascript" src="./_js/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="./_js/ajax.js"></script>
        <link rel="stylesheet" type="text/css" href="./_css/exemple.css" media="screen" />
    </head>
    <body>
        <div id="root">
            <form id="auth" method="post" name="auth" action="">
                    <fieldset>
                            <legend>Authentification</legend>

                            <label for="iden">Identifiant:</label>
                            <br />
                            <input type="text" name="iden" id="iden" class="text" size="20" />
                            <br />
                            <label for="mdp">Mot de Passe:</label>
                            <br />
                            <input type="text" name="mdp" id="mdp" class="text" size="20" />
                            <br /><br />

                            <button type="submit" class="button positive">&nbsp;Connexion</button>
                    </fieldset>
            </form>
            <div id="success" class="success" style="display:none;"></div>
        </div>
    </body>
</html>

On inclut 2 fichiers javascript :

  • jquery-1.3.2.js : API JQuery à télécharger ici
  • ajax.js : notre fichier qui va faire le lien entre notre formulaire et notre traitement php

Le Javascript

Il est composé de 2 fonctions importantes :

  • ready : fonction à exécuter lorsque le document sera prêt.
  • ajax : fonction qui charge une page externe en utilisant une requête HTTP

Les Options

On doit fournir à la fonction « ajax » plusieurs options plus ou moins évidentes. C’est pourquoi je m’attarderai sur dataTypes.
dataType (string) : correspond au format des données qui seront renvoyées du serveur. Si aucun type n’est spécifié, jQuery utilisera le type MIME pour déterminer le format adéquat : responseXMl ou ResponseText. Voici la liste des types disponibles:

  • « xml » : retourne un document XML qui pourra être traité par jQuery.
  • « html » : retourne du code HTML au format texte, inclus l’évaluation des script tags.
  • « script » : évalue la réponse en Javascript et retourne cette dernière au format texte.
  • « json » : évalue la réponse en JSON et retourne un objet Javascript.

Dans notre exemple le fichier action.php retourne des données structurées, c’est pourquoi nous choisissons comme type de données JSON.

$(document).ready(function () {
    $("form#auth").submit(function() {
        var identifiant = $('#iden').attr('value');
        var mdp         = $('#mdp').attr('value');
        $.ajax({
            type: "POST",
            url: "action.php",
            data: "&iden="+ identifiant + "&mdp=" + mdp,
            success: result,
            dataType: "json"
            });
        return false;
    });
});

function result(data){

    var resultat = '<p>Résultat:&nbsp;<b>'+data.identifiant+'</b> vous êtes connecté avec le mot de passe suivant <b>'+
                    data.mdp+"</b><br />n L'exemple est finit retourné sur le site <a class='positive' href='"+data.url+"'>Dollois Connection</a></p>";

    $('form#auth').hide();
    $('div#success').fadeIn("slow");
    $('div#success').append(resultat);

}

Le PHP

Le contenu de ce fichier n’a aucun intérêt, vous l’aurez bien compris, si ce n’est, par exemple, de vous permettre d’interroger une base de données pour vérifier si l’identifiant et le mot de passe correspondent bien à un utilisateur du site.

Le seul point à noter est json_encode qui retourne la représentation JSON d’une valeur.

<?php

$result = array(
    'url'           => 'http://www.dollois.com',
    'identifiant'   => $_POST['iden'],
    'mdp'           => $_POST['mdp'],
);

echo json_encode($result);

?>

Fichiers et liens

Vous trouverez un zip de l’exemple

Voici la liste des différents liens qui peuvent aider à approfondir le sujet: