Pas de rechargement de la page pendant la navigation
URL déformées
Référencement altéré
Vous releverez que le Doctype est standardisé depuis l'arrivée du HTML5.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Demo AJAX Pseudo Check</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> </head> <body> <h2>Demo AJAX Pseudo Check</h2> <div> <label>Nom d'utilisateur :</label> <input name="pseudo" type="text" id="pseudo" value="" maxlength="15" /> <span id="msgbox" style="display:none"></span> </div> </body> </html>
Concernant le code Ajax, vous êtes libre de l'insérer au bas de votre page juste après la balise de fermeture </body> ou alors de placer tout ce code dans un fichier externe que vous inclurez dans la page html.
<!-- AJAX CHECK --> <script type="text/javascript"> $("#pseudo").blur(function() { $("#msgbox").removeClass().addClass('messagebox').text('Check en cours...').fadeIn("slow"); $.post("commun/check-pseudo.php" ,{ pseudo:$(this).val() } ,function(data) { if(data=='no') { $("#msgbox").fadeTo(200,0.1,function() { $(this).html('Ce pseudo est déjà pris').addClass('busy').fadeTo(900,1); }); } else { $("#msgbox").fadeTo(200,0.1,function() { $(this).html('Ce pseudo est disponible').addClass('dispo').fadeTo(900,1); }); } }); }); </script>
connect.inc.php
Dans ce fichier, rien de bien compliquer, on indique juste les identifiants de connexion afin que notre script PHP ait toutes les infos pour aller faire ce qu'il a besoin dans la BDD. Vous remarquerez que j'ai utilisé les nouvelles méthodes PDO (très en vogue) qui assure une meilleure sécurité.
<?php // Connexion define("HOST","localhost", true); define("USER","root", true); define("PASS","", true); // Bases de données define("YOUR_BDD", "TABLE_NAME", true); // PDO MEMBRES $connect_users = new PDO('mysql:host='.HOST.';dbname='.DB_USERS, USER, PASS, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8")); $connect_users->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING); ?>
check-pseudo.php
Voici le check à proprement parler, c'est cette page qui va faire la requête sur la base de données afin de savoir si le nom d'utilisateur est dispo ou non, il va également préparé la réponse pour que le javascript puisse la lire.
<?php require_once 'connect.inc.php'; global $connect_users; $pseudo = $_POST['pseudo']; if(strlen($pseudo) == 0) { echo ('empty'); } else { // On récupère la liste des membres et on check si le pseudo existe déjà $req = $connect_users->query("SELECT pseudo FROM pseudo WHERE pseudo='$pseudo'"); // On déroule la liste $chk_pseudo = $req->fetch(PDO::FETCH_ASSOC); // Si le pseuo existe déjà on retourne non if($chk_pseudo == '1' || $chk_pseudo > '1') { echo ('no'); $ok = false; } else { echo ('yes'); } } ?>
style.css
Pour finir donnons un peu de style à notre input ainsi qu'au span qui contiendra la réponse de la requête.
.messagebox { position:absolute; width:auto; margin-left:30px; border:1px solid #c93; background:#ffc; padding:5px 10px; } .dispo { position:absolute; width:auto; margin-left:30px; border:1px solid #349534; background:#C9FFCA; padding:5px 10px; color:#008000; } .busy { position:absolute; width:auto; margin-left:30px; border:1px solid #CC0000; background:#F7CBCA; padding:5px 10px; color:#CC0000; } input { padding: 5px 10px; }