[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>

**italiano1360** · 07/03/2011, 19h12

Je fais comment pour le abort ? je le met ou stp ?

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

Envoyé par italiano1360

Je fais comment pour le abort ? je le met ou stp ?

Je ne sais pas, le code que j'ai proposé est peut-être pour une autre discussion.

**italiano1360** · 07/03/2011, 19h20

Avec ton code il me marque : "Impossible d'utiliser Ajax sur ce navigateur"

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

J'ai oublié d'appeler la fonction getRequeteHttp().

Code :

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

1
2
3
4
5
6
7
8
getRequeteHttp();
 function envoyerRequete(url, debut)
  {
    if (requeteHttp==null)
    {
      alert("Impossible d'utiliser Ajax sur ce navigateur");
    }
.......

**italiano1360** · 07/03/2011, 19h26

ça m'affiche toujours l'alerte comme quoi mon navigateur supporte pas l'Ajax

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

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
<script type="text/javascript">
var requeteHttp;
function getRequeteHttp()
  {
    if (window.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;
          }
        }       
      }
    }
  }
  getRequeteHttp();
    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>

window.XMLHttpRequest mais pas windows.XMLHttpRequest.
Et moi qui a fait un copier coller bêtement. Tu as eu ce script?

**italiano1360** · 07/03/2011, 19h39

Bon, maintenant il me traite la requête merci, mais il m'affiche le résultat dans une boite d'alerte alors que je veux l'afficher dans la liste deroulante ...

**andry.aime** · 08/03/2011, 03h44

Ben vire ça maintenant

alert(requeteHttp.responseText) ;//test

C'est seulement pour le test.
selectClt.options[i]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function traiterReponse(reponse)
  {
     var nb,selectClt;
     var clients=reponse.split('/');
     nb=clients.length;
     selectClt=document.getElementById("listeClients");
     selectClt.length=0;
     for (var i=0; i<nb; i++)
     {
		var option = new Option(clients[i],clients[i],false);
		selectClt.options[i]=option;
     }
  }

A+.

**italiano1360** · 08/03/2011, 07h12

ça fonctionne je vous remercie

[AJAX] Affichage Resultat Requete

AJAX

Discussions similaires

Partager

Partager