[AJAX] Affichage Resultat Requete

**italiano1360** · 07/03/2011, 17h45

Bonjour,

je souhaite réaliser en Ajax un script qui permet de rechercher un nom de client en la tapant dans une textbox ...
Je veux qu'à chaque lettre tapé la liste s'actualise pour affiner la recherche.

Voici donc ce que j'ai fait :

Code Javascript (inclus a la page ou je suis sensé afficher les résultats)

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
78
<script type="text/javascript">
  function getRequeteHttp()
  {
    var requeteHttp;
    if (windows.XMLHttpRequest)
    { //Mozilla
      requeteHttp=new XMLHttpRequest();
      if (requeteHttp.overrideMimeType)
      {  //problème firefox
        requeteHttp.overrideMimeType('text/xml');
      }
    }
    else
    {
      if (window.ActiveXObject)
      {  //C'est Internet explorer < IE7
        try
        {
          requeteHttp=new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch(e)
        {
          try
          {
            requeteHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch(e)
          {
            requeteHttp=null;
          }
        }       
      }
    }
    return requeteHttp;
  }
    function envoyerRequete(url, debut)
  {
    var requeteHttp=getRequeteHttp();
    if (requeteHttp==null)
    {
      alert("Impossible d'utiliser Ajax sur ce navigateur");
    }
    else
    {
      requeteHttp.open('POST','url',true);
      requeteHttp.onreadystatechange=function(){recevoirReponse (requeteHttp);};
      requeteHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      requeteHttp.send('debutLib=' + debut);
    }
    return;
  }
  function recevoirReponse(requeteHttp)
  {
     if(requeteHttp.readyState==4)
     {
      if (requeteHttp.status==200)
      {
        traiterReponse(requeteHttp.responseText);
      }
      else
      {
        alert("La requête ne s'est pas correctement exécutée");
      }
     }
  }
  function traiterReponse(reponse)
  {
     var i,nb,selectClt;
     var clients=reponse.split('/');
     nb=clients.length;
     selectClt=document.getElementById("listeClients");
     selectClt.length=nb;
     for (i=0; i<nb; i++)
     {
      selectClt.option[i].text=clients[i];
     }
  }
  </script>

Code liste_clients.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
<?php
  include "includes/head.php";
  $cnx = mysql_connect("localhost", "root", "");
  mysql_select_db("videotheque",$cnx);
  mysql_query("SET NAMES UTF8");
 
 
if(!isset($_SESSION['login']))
{
	echo '<p>Vous devez vous identifier pour accéder à cette partie du site.<p>';
}
else
{
	echo '<h1>Liste de tous les Clients</h1><p><label>Recherche d\'un client : </label><input type="text" 		onkeyup="javascript:envoyerRequete(\'getClient.php\',this.value)"><br />';
 
	echo '<select id="listeClients" size="6">
</select></p>';
}
?>
 
 
<?php
include "includes/foot.php";
?>

Code getClient.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
<?php
  header("Cache-Control: no-cache,must-revalidate");
  header('Content-Type: text/plain; charset=ISO-8859-1');
 
  $cnx = mysql_connect("localhost", "root", "");
  mysql_select_db("videotheque",$cnx);
  mysql_query("SET NAMES UTF8");
 
$req=mysql_query("select * from clients where nom like '".$_POST['debutLib']."%'");
$res=mysql_fetch_assoc($req);
if ($res)
{
  $resultat=$res['nom'];
  $res=mysql_fetch_assoc($req);  
}
else
{
  $resultat='';
}
while($res)
{
  $resultat=$resultat.'/'.$res['nom'];
  $res=mysql_fetch_assoc($req);
}
 
mysql_close($cnx);
echo $resultat;
 
?>

ça fait plusieurs heures que je cherche pourquoi mon code ne fonctionne pas mais je ne trouve pas d'erreurs

Merci de votre aide, éclairez moi un peu s'il vous plait

**andry.aime** · 07/03/2011, 17h59

Bonsoir,

requeteHttp.open('POST','url',true);

Code :

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

requeteHttp.open('POST',url,true);

Sinon, on a besoin du code HTML généré de la page qui appelle la fonction ajax mais pas son code php.

A+.

**italiano1360** · 07/03/2011, 18h09

ça ne fonctionne toujours pas avec cette rectification

voici le code HTML de la page qui appelle la fonction

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="content-language" content="fr" /> 
  <link href="style.css" title="defaut" rel="stylesheet" type="text/css" media="screen" />
  <title>Gestion d'une Vidéothéque</title>
  <script type="text/javascript">
  function getRequeteHttp()
  {
    var requeteHttp;
    if (windows.XMLHttpRequest)
    { //Mozilla
      requeteHttp=new XMLHttpRequest();
      if (requeteHttp.overrideMimeType)
      {  //problème firefox
        requeteHttp.overrideMimeType('text/xml');
      }
    }
    else
    {
      if (window.ActiveXObject)
      {  //C'est Internet explorer < IE7
        try
        {
          requeteHttp=new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch(e)
        {
          try
          {
            requeteHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch(e)
          {
            requeteHttp=null;
          }
        }       
      }
    }
    return requeteHttp;
  }
    function envoyerRequete(url, debut)
  {
    var requeteHttp=getRequeteHttp();
    if (requeteHttp==null)
    {
      alert("Impossible d'utiliser Ajax sur ce navigateur");
    }
    else
    {
      requeteHttp.open('POST',url,true);
      requeteHttp.onreadystatechange=function(){recevoirReponse (requeteHttp);};
      requeteHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      requeteHttp.send('debutLib=' + debut);
    }
    return;
  }
  function recevoirReponse(requeteHttp)
  {
     if(requeteHttp.readyState==4)
     {
      if (requeteHttp.status==200)
      {
        traiterReponse(requeteHttp.responseText);
      }
      else
      {
        alert("La requête ne s'est pas correctement exécutée");
      }
     }
  }
  function traiterReponse(reponse)
  {
     var i,nb,selectClt;
     var clients=reponse.split('/');
     nb=clients.length;
     selectClt=document.getElementById("listeClients");
     selectClt.length=nb;
     for (i=0; i<nb; i++)
     {
      selectClt.option[i].text=clients[i];
     }
  }
  </script>
  </head>
 
  <body>
 
<h1>Liste de tous les Clients</h1><p><label>Recherche d'un client : </label><input type="text" onkeyup="javascript:envoyerRequete('getClient.php',this.value)"><br />
<select id="listeClients" size="6">
</select></p>
</body>
</html>

**andry.aime** · 07/03/2011, 18h39

onkeyup="javascript:envoyerRequete('getClient.php',this.value)

1- onkeyup attend déjà un évènement javascript --> inutile de mettre le motif "javascript:"
2-à chaque keyup, une nouvelle requête sera lancée, annule d'abord l'ancienne requête avec abord avant de lancer un nouveau.

Et quand tu dis ça ne fonctionne pas, que se passe t-il?

A+

**italiano1360** · 07/03/2011, 18h50

2-à chaque keyup, une nouvelle requête sera lancée, annule d'abord l'ancienne requête avec abord avant de lancer un nouveau.

???

Je tape une lettre et rien ne s'affiche ... pourtant il y a des clients qui commence par ces lettres dans ma base de donnée.

**andry.aime** · 07/03/2011, 19h06

Envoyé par italiano1360

???

Parce qu'à chaque keyup tu appelles la fonction en mode asynchrone.

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
var requeteHttp;
function getRequeteHttp()
  {
    if (windows.XMLHttpRequest)
    { //Mozilla
      requeteHttp=new XMLHttpRequest();
    }
    else
    {
      if (window.ActiveXObject)
      {  //C'est Internet explorer < IE7
        try
        {
          requeteHttp=new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch(e)
        {
          try
          {
            requeteHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch(e)
          {
            requeteHttp=null;
          }
        }       
      }
    }
  }
    function envoyerRequete(url, debut)
  {
    if (requeteHttp==null)
    {
      alert("Impossible d'utiliser Ajax sur ce navigateur");
    }
    else
    {
      try {requeteHttp.abord();} catch(e){};
	  requeteHttp.open('POST',url,true);
      requeteHttp.onreadystatechange=function(){recevoirReponse (requeteHttp);};
      requeteHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      requeteHttp.send('debutLib=' + debut);
    }
  }
  function recevoirReponse(requeteHttp)
  {
     if(requeteHttp.readyState==4)
     {
      alert(requeteHttp.responseText) ;//test
      if (requeteHttp.status==200)
      {
        traiterReponse(requeteHttp.responseText);
      }
      else
      {
        alert("La requête ne s'est pas correctement exécutée");
      }
     }
  }
  function traiterReponse(reponse)
  {
     var i,nb,selectClt;
     var clients=reponse.split('/');
     nb=clients.length;
     selectClt=document.getElementById("listeClients");
     selectClt.length=nb;
     for (i=0; i<nb; i++)
     {
      selectClt.option[i].text=clients[i];
     }
  }
  </script>

[AJAX] Affichage Resultat Requete

AJAX

Vue hybride

Discussions similaires

Partager

Partager