[DOM] Interroger en temp réel mysql

**guigui69** · 01/04/2008, 18h51

Bonjour à tous,

Je voudrait savoir si c'est possible en temps réel d'interroger ma base mysql et d'afficher les informations récolter sur ma page web.

En fait la personne arrive sur la page web et rentre le code client et je voudrait qu'en javascript il interroge ma base (mysql)en temps réel et récupérer les informations et les affiches dans ma page web (nom prénom numéros etc...).

Je recherche un exemple un tuto pour m'aiguiller sur la bonne voix.

Merci d'avance

guigui69

**DoubleU** · 01/04/2008, 21h41

C'est tout à fait possible et on appelle ca l'Ajax ^^

Ya pas mal de tutoriels sur le site que tu peux consulter pour commencer, par exemple celui la ou celui la

**guigui69** · 02/04/2008, 10h06

Merci pour ces exemples.

est quelqu'un aurait deja réaliser ceci et me donner une piste.

Merci

guigui69

**E.Bzz** · 02/04/2008, 10h13

Bonjour,

Envoyé par guigui69

Merci pour ces exemples.

est quelqu'un aurait deja réaliser ceci et me donner une piste.

DoubleU vient de t'en donner 2.

Y a qu'à suivre les liens

A+

**SpaceFrog** · 02/04/2008, 10h14

le tuto de siddh est très abordable ...

en plus ce que tu cherches à faire est moins complexe.

il te suffit d'ouvrir une insatnce d'axaj et de la faire pointer sur une page php qui fera la requete.
cette page de traitement est indentique à une page de traitement de formulaire
il suffit juste qu'elle retourne le resultat de la requete sous forme de texte
voire utiliser un séparateur dans le texte si tu veux ensuite splitter les infos en javascript ...
Coté javascript tu récupères le responseText..
que tu splitte ou non ... et ensuite tu affiches les infos dasn un value ou un innerHMLT ....

Voilà c'est tout

**guigui69** · 02/04/2008, 12h39

Merci

Je vient te commencer a adapter le code pour ma page

Page web

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
 
<html>
	<head>
		<title></title>
		<script type='text/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;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('information').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				idauteur = document.getElementById('code_client').value;
				xhr.send(idauteur);
			}
		</script>
	</head>
	<body>
<input type="text" name="code_client" id="code_client" value="" maxlength="11" onKeyUp=go()></td>
 
 
<div id='information' style='display:inline'>
ICI la réponse:
</div>
<?php
print_r($_POST)
?>
	</body>
</html>

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
 
<?php
        
        if(isset($_POST["idauteur"])){
                mysql_connect("localhost","root","*****");
                mysql_select_db("qualite");
                $res = mysql_query("SELECT nom_client, tel_client, fax_client, contact_client FROM client WHERE code_client=".$_POST["idauteur"]." ORDER BY nom_client");
                while($row = mysql_fetch_assoc($res)){
                ?>
		ENCORE UN TEST
<input type="text" name="nom_client" id="nom_client" value="<?echo $row["nom_client"];?>" maxlength="32"></td>
<input type="text" name="contact_client" id= "contact_client"value="<?echo $row["contact_client"];?>" maxlength="32"></td>
<input type="text" name="tel_client" id ="tel_client"value="<?echo $row["tel_client"];?>" maxlength="32"></td>
<input type="text" name="fax_client" id="fax_client" value="<?echo $row["faxs_client"];?>" maxlength="32"></td>
				<?php
                                }
        }
 
?>

Pourriez vous me dire si j'ai compris: (#1#)

La personne tape le code client en question dans le champ input, après avoir taper le code ça appelle la fonction go(). En premier il regarde si notre navigateur est compatible si oui il configurer ,puis

xhr.onreadystatechange... Je n'ai pas compris?? si quelqu'un pourrait m'éclairer?

après on stocks les réponses dans un format text si toutes les données sont envoyées et que le serveur est ok.... Et après on insérer les données stocker dans la page web dans l'ID "information"

On ouvre la connexion avec le serveur , avec la méthode "post", la page.
On assigne un header pour que le serveur l'interprète correctement.
Et en dernier on récupérer la valeur du code client qu'on rentre dans idauteur et on l'envoie avec xlr.send(idauteur)

Que me manque-t-il- pour que mes champs s'affiche avec les informations de ma base?

Car actuellement quand je tape le numéros d'un client les champs n'apparaissent pas ( par contre le "ICI la réponse" disparait).

Quel sont mes erreurs?
Pourrait-on mettre un certain temps (une pause) avant d'aller d'effectuer la fonction?

Merci d'avance pour votre aide

guigui69

**guigui69** · 02/04/2008, 15h40

Je pense avoir trouver mon erreur, mais j'ai encore quelque question

voici mon code:
ajax.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
 
<?php
        
        if(isset($_POST["idauteur"])){
                mysql_connect("localhost","root","*******");
                mysql_select_db("qualite");
                $test= $_POST["idauteur"];
                $res = mysql_query("SELECT nom_client, tel_client, fax_client, contact_client FROM client WHERE code_client='$test' ORDER BY nom_client");
                while($row = mysql_fetch_assoc($res)){
                ?>
		<br>
		ENCORE UN TEST
<input type="text" name="nom_client" id="nom_client" value="<?echo $row["nom_client"];?>" maxlength="32"></td>
<input type="text" name="contact_client" id= "contact_client"value="<?echo $row["contact_client"];?>" maxlength="32"></td>
<input type="text" name="tel_client" id ="tel_client"value="<?echo $row["tel_client"];?>" maxlength="32"></td>
<input type="text" name="fax_client" id="fax_client" value="<?echo $row["faxs_client"];?>" maxlength="32"></td>
<br>			
			<?php
                                }
        }
 
?>

mapage.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<html>
	<head>
		<title></title>
		<script type='text/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;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('information').innerHTML = leselect;
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				idauteur = document.getElementById('code_client').value;
				alert(idauteur);
				xhr.send("idauteur="+idauteur);
			}
		</script>
	</head>
	<body>
<input type="text" name="code_client" id="code_client" value="" maxlength="11" onKeyUp="go()"></td>
 
 
<div id='information' style='display:inline'>
ICI la réponse:
</div>
<?php
print_r($_POST)
?>
	</body>
</html>

Pour moi sa a l'air de marcher, mais pourriez-vous regarder mon code pour voir si il y a des erreurs a eviter.

J'ai remarquer aussi qu'il envoie 2 requêtes POST, je pense c'est le fait que j'ai mis onkeyup. Peut-on mettre en place une pause de 1 ou 2 secondes (pour être sur que la personne a taper est taper le code client entier)?

Merci d'avance

guigui69

[DOM] Interroger en temp réel mysql

JavaScript

Vue hybride

Discussions similaires

Partager

Partager