Discussion :

[toulousain3117]

Bonjour, j'ai pas mal fait de recherche sur google et même sur ce forum et bien d'autres, mais je n'arrive pas a trouver la solution adéquate pour le script que je desire réalisé .

J'ai un formulaire avec les champs email et mot de passe , et un fichier php qui me permet de recuperer les informations de mon formulaire pour ensuite connecter une session en php

Jusqu'a la pas de probleme etand donnée que en PHP la connection se realise correctement !

Mais je souhaiterai que ma connection en php se fasse via javascript sur une seul div

que avant ça me mette le formulaire avec les champs et a la validation un petit text Connection en cours .... et ensuite se realise la requete sur mon fichier php pour realisé l'authentification !

Comment puis je faire pour que la connection de fasse avec Javascripts sans que toute la page se charge

Cordialement

[Invité]

Bonjour,
Tu as eu raison de poster ici, car c'est 100% le rôle d'Ajax.
En fait il te suffis de passer par ton XMLHttpRequest les deux données en methode POST.
XMLHttpRequest va donc appeler un PHP de controle/validation du login,
il répondra par un simple echo "tout ce que tu veux en html";
cette réponse tu l'envoie dans ton DIV

[toulousain3117]

mais je doit presenter le code comment avec XMLHttpRequest car déjà que j'ai mit 2 ans pour reussir a faire un refresh d'une div en ajax lol

c'est dans le même genre que ce code ?

Code :

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

1
2
3
4
5
6
7
function chargeFichier() {
    var XHR = new XHRConnection();        
    XHR.setRefreshArea('nomdudiv');
    XHR.sendAndLoad("nomdufichierarefrresh", "GET");
    return true;
 
}

Merci tout de même de ta réponse

[Invité]

OK alors un exemple basique qui peut te servir a tout !
deux PHP
ajax_apprendre.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
 
<SCRIPT language=JavaScript>
function maFonctionAjax(lindex, pseudo)
{
  var MonAjax;
  if (window.XMLHttpRequest) MonAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) MonAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
  MonAjax.open('POST',"ajax_apprendre_sql.php",true);
/*
3: réponse en cours.
4: terminé. 
*/
  MonAjax.onreadystatechange = function()
  {
      if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
          if (document.getElementById) 
          {    
              if (MonAjax.responseText =='true') { 
                    document.getElementById('LeRetour').innerHTML='<font color=GREEN>'+MonAjax.responseText+'</font>';
              }else{                             
                    document.getElementById('LeRetour').innerHTML='<font color=RED>'+MonAjax.responseText+'</font>';
              }
          }     
      }
  }
  MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  MonAjax.send('lindex='+lindex+'&pseudo='+pseudo);                  
}
</SCRIPT>
<div class='centre0'>
<br /><br /><br /><br /><br /><br />
<form method="post" onsubmit="maFonctionAjax(this.lindex.value,this.pseudo.value);return false" action="">
L' index    <input name="lindex" id="lindex" type="text"><br />
Le pseudo:  <input name="pseudo" id="pseudo" type="text"><br />
<br /><br />
<input type="submit" value="envoyer"  /><br />
</form>
 
</div>
<div id="LeRetour"></div>
</body></html>

ajax_apprendre_sql.php qui est celui qui travail et fait
tout ce que tu veux, requete sql etc ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?PHP
$lindex = (isset($_POST['lindex'])) ? (int) $_POST['lindex'] : 9999;
$pseudo = (isset($_POST['pseudo'])) ? $_POST['pseudo'] : '';
if($pseudo!="" && $lindex!=9999){
    echo "true";
    //===== toute action echo html SQL etc...
}
else
{
    echo "le data ".$pseudo."n est pas valide";
}
?>

A toi de jouer

JE REEDITES, car je voulais te mettre en garde contre le risque d'incompatibilitée. Mon exemple est un bon model, mais il te faut quand tu l'auras compris, y ajouter les deux contrôles entre IE et FF puis sur Ajax lui même.
Regardes la réponse sur ce sujet d' Audry.aime
Controle Ajax

[toulousain3117]

merci beaucoup de ton aide, je vais tester et je te tiens au courant

mais lindex cela signifie quoi ?

[andry.aime]

Bonsoir,

mais lindex cela signifie quoi ?

Code :

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

1
2
3
var lindex= document.getElementById('lindex').value;
var pseudo= document.getElementById('pseudo').value;
MonAjax.send('lindex='+lindex+'&pseudo='+pseudo);

Code html :

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

L' index    <input name="lindex" id="lindex" type="text"/><br />

Il faut fermer la balise input.

A+.

[toulousain3117]

j'ai un petit soucis, j'ai adapté ton code mauriser la conection se fait bien, pas de refresh mais sa me met le text en rouge alors que je recupere bien toute les infos et tout , cela peut etre du a quoi ?


c'est mon nouveau code

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
<SCRIPT language=JavaScript>
function maFonctionAjax(email, mdp)
{
  var MonAjax;
  if (window.XMLHttpRequest) MonAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) MonAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
  MonAjax.open('POST',"connect.php",true);
/*
3: réponse en cours.
4: terminé. 
*/
  MonAjax.onreadystatechange = function()
  {
      if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
          if (document.getElementById) 
          {    
              if (MonAjax.responseText =='true') { 
                    document.getElementById('LeRetour').innerHTML='<font color=GREEN>'+MonAjax.responseText+'</font>';
              }else{                             
                    document.getElementById('LeRetour').innerHTML='<font color=RED>'+MonAjax.responseText+'</font>';
              }
          }     
      }
  }
  MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  MonAjax.send('email='+email+'&mdp='+mdp);                  
}
</SCRIPT>
<div class='centre0'>
 
<form method="post" onsubmit="maFonctionAjax(this.email.value,this.mdp.value);return false" action="">
Email   <input name="email" id="email"  type="text" /><br />
MDP :  <input name="mdp" id="mdp"  type="password" /><br />
<br /><br />
<input type="submit" value="envoyer"  /><br />
</form>
 
</div>
<div id="LeRetour"></div>
</body></html>

[toulousain3117]

je verifie d'essaye le code d'origine mais cela ne marche pas non plus

[Invité]

Oui c'est parceque mon exemple est enfantin alors c'est vert si

Code :

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

if (MonAjax.responseText =='true')

Et dans le PHP je renvoie bien true !

Code :

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

1
2
3
4
5
 
if($pseudo!="" && $lindex!=9999){
    echo "true";
    //===== toute action echo html SQL etc...
}

Il est évident que le but est de comprendre la base aprés tu va compliquer de plus en plus mais dominer

[toulousain3117]

j'dite pour mieux expliqué lol

comment je peux faire pour que sa envoie true si la connection se fait et false si la connection ne reussi pas a cause d'un mauvais mot de passe par exemple ?

[Invité]

Je ne peux et ne veux pas te faire tout, mais regardes ce que j'avais posté
je completes avec commentaires

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
 
<?PHP
$lindex = (isset($_POST['lindex'])) ? (int) $_POST['lindex'] : 9999;
$pseudo = (isset($_POST['pseudo'])) ? $_POST['pseudo'] : '';
if($pseudo!="" && $lindex!=9999){
 //===== toute action echo html SQL etc...
 // ======== ici je vais me connecté a SQL
 //========== chercher $pseudo par select
 if ($sql==$psedo)     echo "true";
 if ($sql!=$psedo)     echo "false";
 
}
else
{
    echo "le data ".$pseudo."n est pas valide";
}
?>

Je te laisses imaginer tout ce que tu veux ! y compris envoyer en un seul echo l'équivalent dune liste de 500 articles avec prix etc ...

[toulousain3117]

voila mon formulaire :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<SCRIPT language=JavaScript>
 
function getXhr(){
                                var xhr = null; 
                if(window.XMLHttpRequest) // Firefox et autres
                   xhr = new XMLHttpRequest(); 
                else if(window.ActiveXObject){ // Internet Explorer 
                   try {
                            xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                else { // XMLHttpRequest non supporté par le navigateur 
                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
                   xhr = false; 
                } 
                                return xhr
            }
 
 
 
 
function maFonctionAjax(email, mdp)
{
  var MonAjax = getXhr()
 
 
  MonAjax.open('POST',"connect.php",true);
/*
3: réponse en cours.
4: terminé. 
*/
  MonAjax.onreadystatechange = function()
  {
      if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
          if (document.getElementById) 
          {    
              if (MonAjax.responseText == "true") { 
                    document.getElementById('LeRetour').innerHTML='<font color=GREEN>'+MonAjax.responseText+'</font>';
document.getElementById("test").style.visibility = "hidden";
              }elseif (MonAjax.responseText != "true") {                             
                    document.getElementById('LeRetour').innerHTML='<font color=RED>ff'+MonAjax.responseText+'</font>';
              }
          }     
      }
  }
  MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
var email= document.getElementById('email').value;
var mdp= document.getElementById('mdp').value;
 
  MonAjax.send('email='+email+'&mdp='+mdp);                  
}
</SCRIPT>
<div class='centre0' id="test">
 
<form method="POST" onsubmit="maFonctionAjax(this.email.value,this.mdp.value);return false" action="">
Email   <input name="email" id="email"  type="text" /><br />
MDP :  <input name="mdp" id="mdp"  type="password" /><br />
<br /><br />
<input type="submit" value="envoyer"  /><br />
</form>
 
</div>
<div id="LeRetour"></div>
</body></html>

et ma page connect :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<?
session_start();
//Si la variable $_SESSION['logged'] n'existe pas, on la créée.
if (!isset($_SESSION['logged'])) $_SESSION['logged'] = false;
 
//On oublie pas d'inclure le fichier contenant les identifiants mysql.
require("mysqlcon.php");
 
//Ensuite on vérifie que les variables existent et contiennent quelque chose :)
 
$email = (isset($_POST['email'])) ? (int) $_POST['email'] : 9999;
$mdp = (isset($_POST['mdp'])) ? $_POST['mdp'] : '';
if($mdp!="" && $email!=9999){
   //Mesure de sécurité, notamment pour éviter les injections sql.
   $email = htmlentities(addslashes($_POST["email"]));
   $mdp = htmlentities(addslashes($_POST["mdp"]));
 
 
 
 
      //Sélection des informations.
      $sql_info = mysql_query("SELECT * FROM wemboo_user WHERE email='$email'")or die(mysql_error());
      $donnees_info = mysql_fetch_array($sql_info);
 
      //Si le mot de passe est le même.
      if ($donnees_info["pass"] == $mdp)
      {
 
 
            //On modifie la variable qui nous indique que le membre est connecté.
            $_SESSION["logged"] = "true";
 
            //On créé les variables contenant des informations sur le membre.
            $_SESSION['id'] = $donnees_info['id'];
            $_SESSION['email'] = $email;
 
            $id = $_SESSION['id'];
            $ip = $_SERVER['REMOTE_ADDR'];
 
            $conect = time();
 
                     echo "true";
 
 
 
 
         }
 
      else
      {
 
 
 
         $erreur = "le mot de passe est incorrecte !";
echo "false";
 
 
 
 
      }
   }
 
else
{
 
  $erreur = 'Erreur : vous avez oublié de remplir un ou plusieurs champs !<br />
 
<form method="post" action="index.php">
                        <label><input type="text" name="email" value="pseudo" /></label><br />
                        <label><input type="password" name="mdp" value="" /></label><br />
                        <input type="submit" name="connexion" value="Se connecter" />
                </form>
                <a href="modules.php?page=inscription">S\'inscrire</a>';
 
                }
echo("$erreur");
                ?>

et cela ne marche toujorus pas, la requete est bien effectué , mais quand c'est true je voudrais que sa passe au vert, et rouge au false

[toulousain3117]

sayé c'est resolu c'etait juste des espaces a la fin de mon script php merci beaucoup a tous de votre aide