récupération de données dans une base avec JSON

Version imprimable

Bonjour,

Je voudrais récupérer des données dans une base de données pour initialiser un formulaire.

côté javascript, dans mon fichier appli.js, j'ai une fonction qui lance une requête ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function dbInfos() {
	Ext.Ajax.request({
		url: 'scripts/dbDates.php',
		success: function(response, opts) {
			var obj = Ext.decode(response.responseText); // ou Ext.util.JSON.decode(response.responseText), c'est pareil
			Ext.MessageBox.alert(obj);
		},
		failure: function(response, opts) {
			Ext.MessageBox.alert('reponse', 'requete echouée');
		}
	});
}

mon script dbDates.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php 
 
        // recupération des données dans la base
 
        $base = pgsqlDBconnect(MAREL_SERVER, MAREL_PORT, MAREL_BASE, MAREL_USER, MAREL_PASSWORD);
        $sql = 'SELECT MIN(MES_DATE) AS DD, MAX(MES_DATE) AS DF'. 
                ' FROM MESURES';
        
        $res = pg_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.pg_last_error());
 
        $t = array();
        
        while ($data = pg_fetch_array($res)) {
                $t[] = array('dd'=>$data['dd'], 'df'=>$data['df']);
        }
                
        pg_free_result($res);
        pgsqlDBdisconnect($base);
        echo json_encode($t);
?>

ce script fonctionne, puisque quand je le lance seul, il renvoie :

Code:

[{"dd":"2000-07-19 15:33:16","df":"2011-03-14 04:55:03"}]

ce qui semble être un objet json correct.

mais quand j'appelle ma fonction dbInfos (clic d'un bouton sur ma page), firebug me renvoie l'erreur :

Code:

missing ) in parenthetical

dans le fichier ext-all.js, ligne 8

si c'est un bug dans la librairie ext, je ne me vois pas aller modifier ça, sinon, qu'est ce qui cloche ?

Merci,
Nico

Bon, j'ai avancé, ça marche (enfin presque...)

mon script dbDates.php:

Code:

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
<?php 
 
        // recupération des données dans la base
        $base = pg_connect("host='localhost' port=5432 dbname='MAREL' user='obsadmin' password='obsadmin'");
 
        $sql = 'SELECT MIN(MES_DATE) AS DD, MAX(MES_DATE) AS DF'. 
                ' FROM MESURES';
 
        $res = pg_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.pg_last_error());
 
        $sql2 = 'SELECT PARAM_LIBELLE  AS P FROM PARAMETRES';
 
        $res2 = pg_query($sql2) or die('Erreur SQL !<br />'.$sql2.'<br />'.pg_last_error());
 
        $dd = array(); $df = array(); $p = array();
        
        while ($data = pg_fetch_array($res)) {
                $dd[] = $data['dd'];
                $df[] = $data['df'];
        }
 
        while ($data2 = pg_fetch_array($res2)) {
                $t2[] = trim($data2['p']);
        }
        
        $tt = array('dd'=>$dd, 'df'=>$df, 'parametres'=>$t2);
 
        pg_free_result($res);
        pg_free_result($res2);
        pg_close($base);
 
        echo json_encode($tt);
 
?>

le json renvoyé:

Code:

{"dd":["2000-07-19 15:33:16"],"df":["2011-03-15 04:47:17"],"parametres":["Temp\u00e9rature de l'air sec","Humidit\u00e9 relative","Temp\u00e9rature","Salinit\u00e9","Oxyg\u00e8ne dissous","Rayonnement photosynth\u00e9tiquement actif","Chlorophylle a","Turbidit\u00e9","pH"]}

ensuite, j'initialise mon formulaire, notamment une combo box avec les items du tableau 'paramètres'

voici mon fichier appli.js:

Code:

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
var DBSTART;
var DBEND;
var DBPARAMETRES = new Array();
 
 
 
function dbInfos2() {
	Ext.Ajax.request({
		url: 'scripts/dbDates.php',
		success: function(response, opts) {
			var infos = Ext.util.JSON.decode(response.responseText); //, c'est pareil
			var dd = infos['dd'][0].substr(0,10);
			dd = dd.replace(/-/g, '/');
			DBSTART = new Date(dd);
			var df = infos['df'][0].substr(0,10);
			df = df.replace(/-/g, '/');
			DBEND = new Date(df);
			for (var i = 0; i < infos['parametres'].length; i++){
	    			DBPARAMETRES[i] = infos['parametres'][i];
			}
//			Ext.MessageBox.alert(DBPARAMETRES.length);
		},
		failure: function(response, opts) {
			Ext.MessageBox.alert('reponse', 'requete echouée');
		}
	});
}
 
Marel.wParametresGraphe = Ext.extend(Ext.Window, {
 
	initComponent : function() {
 
 
dbInfos2();
			// bloc sélection du paramètre
Ext.MessageBox.alert(DBPARAMETRES.length);
			var pp = new Array();
			for (var i = 0; i < DBPARAMETRES.length; i++){
	    			pp.push({p: DBPARAMETRES[i]});
			}
			var store = new Ext.data.JsonStore({
							fields: ['p']
							,data: pp
			});
 
			var fsetParametres = new Ext.form.FieldSet({
					xtype: 'fieldset'
					,title: 'Paramètres'
					,autoWidth: true
					,items: [new Ext.form.ComboBox({
								id: 'parametre'
								,name: 'parametre'
								,store: store
								,displayField: 'name'
								,hideLabel: true
								,width: 200
								,typeAhead: true
								,mode: 'local'
								,forceSelection: true
								,triggerAction: 'all'
								,emptyText: 'Sélectionnez un paramètre...'
								,allowBlank: false
						})
					]
			});
 
......

le problème, c'est que quand je fais alert de DBPARAMETRES.length, ça me renvoie 'vide', quand je la lance dans la fonction dbInfos2, ça me renvoie bien 9 (nbre d'éléments du tableau paramètres).
Je pense que ça vient du fait que c'est de l'ajax, et donc le résultat de la requête n'est pas encore revenu quand il lance la fonction initComponent.
Comment faire pour attendre le retour de la requête ajax?
ou alors ajax n'est pas la bonne solution?

Merci,
Nico

16/03/2011, 13h59
abraxis

Petite astuce, pour tester si ton Json est correct.
http://www.jsonlint.com/

Ton Json est valide ;)

j'ai essayé par une autre méthode avec ext.data.jsonStore :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Marel.wParametresGraphe = Ext.extend(Ext.Window, { initComponent : function() { var dbInf = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: 'scripts/dbDates.php'}), reader: new Ext.data.JsonReader({fields: ['dd', 'df', 'parametres']}), remoteSort: false }); dbInf.on('load', function() { Ext.MessageBox.alert('reponse', dbInf.getAt(0).data.dd); }); dbInf.load(); ....
le json renvoyé par le script php est correct, mais firebug me met une erreur :

Code:

dbInf.getAt(0) is undefined

comment accéder aux éléments du json ?

Merci,

Nico

16/03/2011, 15h05
abraxis

Essaie avec

Code:

console.info(dbInf);

Mais ce la ne pourra pas fonctionner car dans l'appel de ton store tu veux afficher des données qui n’existe pas encore...
A moins que je me trompe.
16/03/2011, 15h23
DiverSIG

quand je fais afficher dbInf, firebug renvoie toutes les caractéristiques de l'objet, et il y a une variable totalLength qui est à 0.

Pourquoi les données n'existant pas encore quand je fais dbInf.load()? puisque normalement, elles devraient exister à partir de la déclaration de dbInf non ?

dans ce cas, quelle est la solution ?
je voudrais que quand je commence la déclaration de la config de mon formulaire, le résultat de la requête soit là, pour que je puisse initialiser les champs de mon formulaire...

Merci,
Nico
16/03/2011, 15h34
abraxis
Le .load() sert à appeler les données.
Pendant que tu appel les données tu ne peu pas les afficher car elles n'existent pas encore.

Essaie de mettre

Code:

Ext.MessageBox.alert('reponse', dbInf.getAt(0).data.dd);

Après le .load()

D'ailleur pour le load je ferais plutot comme ceci:
Code:

1 2 3 dbInf.load({ Ext.MessageBox.alert('reponse', dbInf.getAt(0).data.dd); });
A la place de :
Code:

1 2 3 4 5 dbInf.on('load', function() { Ext.MessageBox.alert('reponse', dbInf.getAt(0).data.dd); }); dbInf.load();
16/03/2011, 16h05
DiverSIG
si je met mon alert après une instruction dbInf.load(), j'ai la même erreur.

Code:

dbInf.getAt(0) is undefined

si je met :
Code:

1 2 3 dbInf.load({ Ext.MessageBox.alert('reponse', dbInf.getAt(0).data.dd); });
j'ai une erreur :

Code:

missing : after property id

sur la ligne du alert.

Nico
11/04/2011, 22h55
kanzarih

Salut, voici une série de tutoriel sur ExtJS dans la 3emme partie il utilise une DB MySQL:

http://www.farkess.com/web/tutoriels...s-1ere-partie/

http://www.farkess.com/web/tutoriels...-2ieme-partie/

http://www.farkess.com/web/tutoriels...-3ieme-partie/

Du site : http://www.farkess.com/

Bonjour,

C'est normal que ton appel à dbInf2 ne te renvoie pas les données voulues. Par défaut les requêtes Ajax sont asynchrone et donc le traitement n'est pas forcément terminé avant l'appelle de ta méthode. Il existe un moyen de rendre les requêtes Ajax synchrone, il s'agit d'une extentsion qui s'appelle baseX. Une fois la librairie ajouté tu as accés à un paramètre supplémentaire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Ext.Ajax.request({ url: 'scripts/dbDates.php', async : false, success: function(response, opts) { var infos = Ext.util.JSON.decode(response.responseText); //, c'est pareil var dd = infos['dd'][0].substr(0,10); dd = dd.replace(/-/g, '/'); DBSTART = new Date(dd); var df = infos['df'][0].substr(0,10); df = df.replace(/-/g, '/'); DBEND = new Date(df); for (var i = 0; i < infos['parametres'].length; i++){ DBPARAMETRES[i] = infos['parametres'][i]; } // Ext.MessageBox.alert(DBPARAMETRES.length); }, failure: function(response, opts) { Ext.MessageBox.alert('reponse', 'requete echouée'); } });