[AJAX] Charger ,recharger page

**HoliCApplet** · 29/06/2012, 11h18

Bonjour ,

Donc je souhaite rendre vraiment dynamique un site ,je prévoit du php, javascript ajax pour cela ,je ne sait pas si j'ai vraiment besoin de code ou si c'est seulement une façon de penser qu'il me faut ,pour commencer assez simplement et pouvoir m'introduire je pense me pencher sur une identification toute banale mais sans vouloir recharger tout les éléments de mon site :

J'ai tenter ceci :

Index.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script language="JavaScript">
	function recup(login, pwd)
{
  var OAjax;
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
  OAjax.open('POST',"verif_id.php",true);
  OAjax.onreadystatechange = function()
  {
      if (OAjax.readyState == 4 && OAjax.status==200)
      {
          if (document.getElementById) 
          {    
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('msg').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
              }else{                             /* PAS OK */
                    document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
              }
          }     
      }
  }
  OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  OAjax.send('login='+login+'&pwd='+pwd);                  
} 
 
</script>	
</head>
<body onload="">
<?php
require("session.php");
 
if (empty($_SESSION['nom']))
{
echo "Bonjour Visiteur";
}else{
$nom = $_SESSION['nom'];
$prenom = $_SESSION['prenom'];
 
echo "Bonjour ".$nom." ".$prenom;
}
 
?>
<form method="post" onsubmit="recup(this.login.value,this.pwd.value);return false" action="">
login :<input type="text" id="login" name="login"><br/>
pwd :<input type="password" id="pwd" name="pwd"><br/>
<input type="submit" id="submit" name="submit">
</form>
<div id="msg"></div>
 
</body>

Ici j'appel par le biais de ma fonction recup() une page php (ci-dessous) qui vérifie mon formulaire (ci-dessus).

verif_id.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
 
$erreurs=array();
 
if(!$_POST['login'] OR !$_POST['pwd']){
    $erreurs[]='Toutes les cases doivent etre remplit';
}
 
 
if(count($erreurs)==0)
{
        
    require("connect.php");
        require("session.php");
        $log = $_POST['login'];
        $pwd = $_POST['pwd'];
        
        $table = "user";
        
        $req1 = "SELECT * from ".$table." where MAIL= '".$log."'";
        $result = mysql_query($req1) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error()); ;
        $rep = mysql_fetch_assoc($result);
 
        if($pwd == $rep['PASS'])
        {
 
                        $_SESSION['id'] = $rep['TIE_ID'];
 
        }
        else
  {
  echo "mauvais couple login/pass";
  }
    
}
else
{
    echo "<p class='erreur'>";
        for($i=0;$i<count($erreurs);$i++)
        {
        echo "- ".$erreurs[$i].".<br />";
        }
    echo "</p>";
}
?>

A vrai dire l'ensemble du code je le comprend bien et n'est pas eu trop d'erreur mais voila ça se complique lorsque je valide le formulaire ,j'afficher mon message de bienvenu mais celui-ci ne change pas (et oui bien que la verif du formulaire ne fait pas changer de page tout les autres paramètres ne sont pas recharger ,donc si quelqu'un à une façon intelligente de prendre le problème ,dois-je recharger plusieurs partie de mon code ? Puis-je recharger les page que j'importe de la même manière ? le tout sans bouton superflus ? Comment dois-je procédé sans recharger toute la page ? je suis ouvert à toute suggestion et espère avoir été clair !!

**bmartin** · 29/06/2012, 17h24

Bonjour,

Il est normal que le message de bienvenue ne change pas. Dans ton code il est généré à l'appel de la page coté serveur.

La solution serait de le mettre dans un label :
echo "<label id='messageBienvenue'>Bonjour Visiteur</label>";

De ce fait il sera possible de le changer sur le sucess de la requête ajax.
document.getElementById('messageBienvenue').innerHTML="bonjour toto";

Ce bout de code :

else{
$nom = $_SESSION['nom'];
$prenom = $_SESSION['prenom'];

echo "Bonjour ".$nom." ".$prenom;
}

Ne sera jamais utilisé sauf si la page entière était rechargé.

Par ailleurs il est plus intéressant de vérifier si le login et le password n'est pas vide avant de faire la requête en ajax :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var login=document.getElementById('login').value;
var pwd=document.getElementById('pwd').value;
if(login!="" && pwd!=""){
      requête ajax
}

L'ajax est intéressant si c'est pour recharger une partie de ta page mais n'est pas fait pour charger toute les pages de ton site.(bien que c'est possible ...)

Je te conseille aussi de séparer ton code js,css de ta page html/php le must étant bien sur une archi mvc.

Bon courage.