[AJAX] Requète SQL en utilisant du Javascript

**tstievet** · 20/10/2006, 22h57

Bonjour !

Je suis bloqué

En fait, j'ai un formulaire avec 3 composants :
- 2 listes déroulantes
- 1 input

Je souhaiterai : lorsque l'on change la valeur d'une de ces 2 listes, je récupère le nbre de ligne retournée par une requête SQL. Cette requête utilise les valeurs actuelles des 2 listes dans sa clause where. Puis, on affiche le nbre de lignes retournées dans le Input.

Voila un petit exemple de code (j'ai fait au plus simple ... enfin j'espère) :

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
<script language="javascript">
 
	function afficheMot()
	{
		document.write("<? $sql=select * from matable where champ1=document.form.cond1.value and champ2=document.form.cond2.value; ?>"); 
		document.write("<? $req=mysql_query($sql); ?>");
		document.write("<? $nb=mysql_num_rows($req); ?>");
		document.form.nb.value = <? echo $nb; ?>;
	}
 
</script>
 
 
<form name='form' method='post' action='xxx.php'>
 
<td>
	<select name='cond1' onchange="afficheNb()">
		<option value='a'>a
		<option value='b'>b
</td>
 
<td>
	<select name='cond2' onchange="afficheNb()">
		<option value='a'>a
		<option value='b'>b
</td>
 
<td>
	<input type='text' name='nb'>
</td>
 
<td>
	<input type='submit' value='Envoyer'>
</td>
 
</form>

Ce bout de code ne fonctionne pas car il n'est pas possible affecter à une variable php du code Javascript. Mais je ne sais pas comment faire ....

Au secours svp. Merci.

**vg33** · 20/10/2006, 23h02

Va faire un tour dans la partie javascript => AJAX sera ton ami

**tstievet** · 20/10/2006, 23h39

Merci pr ta réponse.

J'ai été à la chasse aux infos sur Ajax (que je ne connaissais pas du tout). Et j'ai plutot du mal à m'y retrouver.

L'utilisation d'Ajax est elle indispensable ?? ou existe peut être une solution autre ?

J'ai créér une application php sans Ajax. Si j'utilise Ajax, c'est simplement pour pouvoir résoudre mon problème.

Est ce que tu crois nécessaire d'utiliser Ajax que pour faire ça ?? (Y a t'il des choses à installer préalablement pour utiliser Ajax ??)

Peux tu me donner une piste, un exemple d'utilisation d'Ajax avec mon exemple pour m'aider à démarrer ? Je ne sais pas trop par ou commencer.

Merci.

**vg33** · 21/10/2006, 00h16

Si tu veux que l'affichage de ton input soit immédiat, sans rechargement de la page, AJAX est l'unique solution.
Un tutoriel, que tu peux adapter : http://nicolaspied.developpez.com/ajax-premiers-pas/

**sekaijin** · 22/10/2006, 09h35

question de principe je suis contre embarquer les requetes SQL dans le javascript

au début de l'informatique tout était sur une même machine. l'application contenait tout les données, les traitements et l'interface utilisateur

puis on a déporté l'écran mais rien d'autre et on c'est rapidement apperçu que ce n'était la bonne solution

alors on à déporté l'apli sur le poste client et on à mis les données sur un serveur mais ce mode client-serveur a lui aussi rapidement montré ses limites.

et arrivé alors la mode du client léger (le navigateur) l'application est sur un serveur les données aussi (pas necessairement le même) et l'interface (l'affichage) sur le poste client.

mais là encore on en voit vite les limite.

aujourd'hui on s'orient vers l'IHM sur le poste client (et plus seulement l'affichage de celle-ci) les traitement sur un serveur applicatif et les donnée sur un serveur de donnée.

ce que tu cherche à faire c'est revenir au client-serveur d'autre fois c'est le poste client qui embarque tous les traitement et qui intéroge directement le serveur de données. (enfin presque: il passe par un php ou un asp pour etablir la conexion SQL)

à mon avis la meilleur solution est de définir un service applicatif (une page asp php ou autre) qui est un sens par exemple "donner liste des client" "calculer la tva" etc. cette page en fonction des paramêtres fournis effectue le traitement et renvoit le résultat brut (sous forme de donnée pas de HTML mais JSON XML txt ...)

le javascript lui ne fait qu'invoquer la page et de se servir des résultats.

dans ton cas un php (ou asp) coutWord.php qui exécute la requête en fonction des paramètre champs1 et champs2

et ton javascript qui lui l'apelle

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
<script language="javascript">
 
	function afficheMot() {
            url = 'coutWord.php?c1=' + escape(document.form.cond1.value) + '&c2=' + escape(document.form.cond2.value)
            XHR.open("GET", url, false);
            document.form.nb.value = XHR.responseText;
	}
 
</script>
 
 
<form name='form' method='post' action='xxx.php'>
 
<td>
	<select name='cond1' onchange="afficheNb()">
		<option value='a'>a
		<option value='b'>b
</td>

voilà pour le principe
1) cela ne laisse rien suposer de la structure de ta base côté client
2) si le traitement évolu il n'y a qu'un seul endroit ou il faut le changer
3) si un jour tu veux accéder à ce traitement depuis une autre interface applicative ou client tu n'as rien d'autre à faire que te concentrer sur ce nouveau client et non sur le traitement.

Je le dis et je le répète embarquer les traitements applicatif dans l'interface utilisateur est un retour au mode client-serveur qui à grandement montré ses limites.

il ne devrait y avoir aucun accès aux donnée depuis un IHM sans passer par un serveur applicatif. l'IHM n'a aucunement besoin de savoir comment sont définis les données que traitent les services du coeur applicatif.

le client n'en sera que plus léger et rapide et l'application plus robuste.

A+JYT

**tstievet** · 22/10/2006, 14h44

Merci de m'avoir répondu de manière aussi complète.

Tes fonctions 'XHR.open' et 'XHR.responseText' sont des fonctions Ajax ??

**javatwister** · 22/10/2006, 17h39

alternative assez rapide:

(test.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
 
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
 
<script type="text/javascript">
 
var g;
 
function nbr(v){
 
	g=document.getElementById("ghost");
	while(g.lastChild){
		g.removeChild(g.lastChild)
	};
 
	var scr=document.createElement('script');
	scr.setAttribute("src","liste.inc.php?v="+v+"&alea="+Math.random().toFixed(3));
 
	g.appendChild(scr);
 
 
}
 
 
</script>
 
</head>
 
<body>
 
<div id="ghost"></div>
 
<form id="f">
	<p>
		<select id="s1" onchange="nbr(this.value)">
			<option value="zero">zéro</option>
			<option value="un">un</option>
			<option value="deux">deux</option>
			<option value="trois">trois</option>
			<option value="ma table">ma table</option>
		</select>
 
	</p>
 
	<p>
		<input type="text" id="r" />
	</p>
 
</form>
 
 
</body>
</html>

(liste.inc.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
<?php
 
// routine de connection à inclure;
 
 
$v=$_GET['v'];
 
$req=mysql_query("select champ from ma_table where champ='$v'");
$tot=mysql_num_rows($req);
 
echo 'var tot='.$tot.';';
 
?>
 
document.getElementById("r").value=tot;

http://javatwist.imingo.net/test.php

**sekaijin** · 27/10/2006, 14h54

Envoyé par tstievet

Merci de m'avoir répondu de manière aussi complète.

Tes fonctions 'XHR.open' et 'XHR.responseText' sont des fonctions Ajax ??

non ce sont les fonction native de XMLHttpRequest

Code :

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

'XHR = new XMLHttpRequest();

sous IE il faut passer par createObject
regarde la doc c'est complet (sur msdn par exemple)

**denisC** · 30/10/2006, 11h08

Envoyé par javatwister

alternative assez rapide:

JT, pourquoi tu aimes pas xmlHttpRequest? Tu peux faire exactement la même chose, d'une façon plus propre et spécifiquement faite pour. Je suis d'accord qu'au final, c'est exactement pareil, mais pourquoi ajouter un script plutot que d'utiliser XHR?!?

Envoyé par sekaijin

question de principe je suis contre embarquer les requetes SQL dans le javascript

à mon avis la meilleur solution est de définir un service applicatif (une page asp php ou autre) qui est un sens par exemple "donner liste des client" "calculer la tva" etc. cette page en fonction des paramêtres fournis effectue le traitement et renvoit le résultat brut (sous forme de donnée pas de HTML mais JSON XML txt ...)

Euh, question de sécurité aussi. Effectivement, la solution est d'utiliser Ajax pour récuperer une liste d'objet métier, pas de laisser Ajax faire la requete SQL!!!!

**javatwister** · 31/10/2006, 09h54

pas à me justifier là-dessus; j'ai 3 applis parfaitement rodées qui marchent avec xhr;
mais simplement pour rafraichir une balise en fonction d'un paramètre php, c'est un peu ridicule de mobiliser une demi-douzaine de méthodes javascript!

**denisC** · 31/10/2006, 10h25

Envoyé par javatwister

pas à me justifier là-dessus; j'ai 3 applis parfaitement rodées qui marchent avec xhr;
mais simplement pour rafraichir une balise en fonction d'un paramètre php, c'est un peu ridicule de mobiliser une demi-douzaine de méthodes javascript!

Je ne te demande pas de te justifier, j'essaye de comprendre.

Avec XHR, je fais ça en une seule méthode aussi ! tu ouvres ton XHR, tu recuperes le flux au format JSON, et il ne te reste plus qu'à l'évaluer!
Enfin, les gouts et les couleurs

[AJAX] Requète SQL en utilisant du Javascript

JavaScript

Discussions similaires

Partager

Partager