[DOM] Passage de variable vers PHP

Version imprimable

02/07/2008, 23h59
popovitch130

[DOM] Passage de variable vers PHP

Bonsoir,

Je cherche à passer des variables Javascript(si possible en mode POST) vers un script PHP . Le but c'est de récupérer les résultats de plusieurs requetes Google et les injecter dans une BDD ...

Merci de votre aide précieuse :D
03/07/2008, 08h45
SpaceFrog
deux possibilités pour le post ...
- un formulaire
- une requete ajax en pots
03/07/2008, 11h10
popovitch130

La méthode 1 je connais pas, via le formulaire on peut faire référence qu'à des balise html input non ?

La méthode 2 nickel merci chef
03/07/2008, 11h13
SpaceFrog

pour le formulaire il suffit de mettre des champs hidden ayant pour name le nom de la variable voulue, et mettre dyanmiquement avec javascript la value ...

coté php tu recupères

Code:

$_POST['mavariable']
03/07/2008, 11h43
popovitch130

Merci SpaceFrog !

J'ai crié victoire un peu tôt ....

Avant de passer quoi que ce soit, j'essaye de tester les données que je récupères. J'essaye d'afficher la taille du tableau qui contient les données récupérées : aucune donnée :lol:.

Au chargement de la page, l'alert se fait avant que les données ne soit reçues ce qui explique en partie la valeur 0.

Je suis novice en javascript et AJAX, mais j'avais en tête de tester le statut de l'objet XMLHTTPRequest avant de faire mon alert. Seulement avec l'API google, je ne trouve pas l'accès à cet objet dans la doc de référence.

Pour pouvoir tester l'API google, il faut demander une clé et spécifier un répertoire de votre site web si ce mini projet vous interresse ...

Voici la page que je teste

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
68
69
70
71
 
<!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">
<head>
<title>My Google AJAX Search API Application</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAMSqmfofB37D7CzKiAFnEoBS3vFtSzJjGAykSs6v5CF6--iIEDhQ_MQ-Ph7O_YO9XRC3KR9iY9R22gQ" type="text/javascript"></script>
<script src="../js/prototype-1.6.0.2.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
    //<![CDATA[
 
	// LE SCRIPT GOOGLE
    google.load("search", "1", {"language" : "fr"});
 
    function OnLoad() {
      // L'OBJET DE CONTROLE DE RECHERCHES (WEB, LIVRES ...)
      var searchControl = new google.search.SearchControl();
 
      // LES OPTIONS D AFFICHAGE DU CONTROLE DE RECHERCHES
      var options = new GsearcherOptions();
      options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
      searchControl.addSearcher(new GwebSearch(), options);
 
      // L'OBJET DE RECHERCHE SUR LE WEB
      var googlewebSearch = new GwebSearch();
      searchControl.addSearcher(googlewebSearch, options);
 
      // MODE DE REPRESENTATION ... (voir doc)
      var drawOptions = new GdrawOptions();
      drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR);
 
      // ON SPECIFIE LA DIV D INSERTION DU SNIPPET
      searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
 
      // LA RECHERCHE
      searchControl.execute("une recherche de test");	  
 
      var titre = new Array();
      var texte = new Array();
      var url = new Array();
 
      titre = document.getElementById('searchcontrol').getElementsByClassName('gs-title');
      texte = document.getElementById('searchcontrol').getElementsByClassName('gs-snippet');
      url = document.getElementById('searchcontrol').getElementsByClassName('gs-visibleUrl gs-visibleUrl-short');
 
      // UN PREMIER TEST titre.lenght = undefined
      alert(titre.length);
 
      // PAR LA SUITE : redraw_donnees();
    }
 
	// LORSQUE LA REQUETTE EST CHARGEE ON RAPPELLE LA FONCTION OnLoad (pour la navigation page/page j'imagine)
    google.setOnLoadCallback(OnLoad);
 
	// LA FONCTION QUI RECUPERE LES DONNEES RENVOYEES PAR GOOGLE
	function redraw_donnees(){
		var titre = new Array();
		var texte = new Array();
		var url = new Array();
 
		titre = document.getElementById('searchcontrol').getElementsByClassName('gs-title');
		texte = document.getElementById('searchcontrol').getElementsByClassName('gs-snippet');
		url = document.getElementById('searchcontrol').getElementsByClassName('gs-visibleUrl gs-visibleUrl-short');
 
	}
    //]]>
    </script>
</head>
<body>
<div id="searchcontrol">Loading...</div>
</body>
</html>

Petite correction dans le code, je récupère toujours un tableau vide ...

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
 
<!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">
<head>
<title>My Google AJAX Search API Application</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAMSqmfofB37D7CzKiAFnEoBS3vFtSzJjGAykSs6v5CF6--iIEDhQ_MQ-Ph7O_YO9XRC3KR9iY9R22gQ" type="text/javascript"></script>
<script src="../js/prototype-1.6.0.2.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
    //<![CDATA[
 
	// LE SCRIPT GOOGLE
    google.load("search", "1", {"language" : "fr"});
 
    function OnLoad() {
      // L'OBJET DE CONTROLE DE RECHERCHES (WEB, LIVRES ...)
      var searchControl = new google.search.SearchControl();
 
      // LES OPTIONS D AFFICHAGE DU CONTROLE DE RECHERCHES
      var options = new GsearcherOptions();
      options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
      searchControl.addSearcher(new GwebSearch(), options);
 
      // L'OBJET DE RECHERCHE SUR LE WEB
      var googlewebSearch = new GwebSearch();
      searchControl.addSearcher(googlewebSearch, options);
 
      // MODE DE REPRESENTATION ... (voir doc)
      var drawOptions = new GdrawOptions();
      drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR);
 
      // ON SPECIFIE LA DIV D INSERTION DU SNIPPET
      searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
 
      // LA RECHERCHE
      searchControl.execute("une recherche de test");	  
 
       redraw_donnees();
    }
 
	// LORSQUE LA REQUETTE EST CHARGEE ON RAPPELLE OnLoad (pour la navigation page/page j'imagine)
    google.setOnLoadCallback(OnLoad);
 
	//MA FONCTION QUI RECUPERE LES DONNEES RENVOYEES PAR GOOGLE
	function redraw_donnees(){
		var titre = new Array();
		var texte = new Array();
		var url = new Array();
 
		titre = document.getElementById('searchcontrol').getElementsByClassName('gs-title');
		texte = document.getElementById('searchcontrol').getElementsByClassName('gs-snippet');
		url = document.getElementById('searchcontrol').getElementsByClassName('gs-visibleUrl gs-visibleUrl-short');
 
                alert(titre.length); // VAUT 0
 
	}
    //]]>
    </script>
</head>
<body>
<div id="searchcontrol">Loading...</div>
</body>
</html>

05/07/2008, 16h31
popovitch130

J'ai testé de déclancher la fonction redraw_donnees() comme ceci :

<body onunload="redraw_donnees();">

Au moment ou je recharge la page, les données sont reçues ...
J'ai essayé un location.reload() à divers endroits du code ... mais ça recharge la page en boucle ...

Si vous avez une suggestion je prends ! :mouarf:

J'ai enfin trouvé la méthode de callback pour signifier que les données sont chargées : setSearchCompleteCallback ( la page de doc
Ma petite fonction est bien déclanchée à la fin du chargement des résultats, mais les résultats passés en argument n'arrivent pas :

arguments[0] UNDEFINED

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
68
69
70
71
 
 <!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">
<head>
<title>My Google AJAX Search API Application</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAMSqmfofB37D7CzKiAFnEoBS3vFtSzJjGAykSs6v5CF6--iIEDhQ_MQ-Ph7O_YO9XRC3KR9iY9R22gQ" type="text/javascript"></script>
<script src="../js/prototype-1.6.0.2.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
    //<![CDATA[
 
	// LE SCRIPT GOOGLE
    google.load("search", "1", {"language" : "fr"});
 
    function OnLoad() {
      // L'OBJET DE CONTROLE DE RECHERCHES (WEB, LIVRES ...)
      var searchControl = new google.search.SearchControl();
 
      // LES OPTIONS D AFFICHAGE DU CONTROLE DE RECHERCHES
      var options = new GsearcherOptions();
      options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
      searchControl.addSearcher(new GwebSearch(), options);
 
      // L'OBJET DE RECHERCHE SUR LE WEB
      var googlewebSearch = new GwebSearch();
      searchControl.addSearcher(googlewebSearch, options);
 
      // MODE DE REPRESENTATION ... (voir doc)
      var drawOptions = new GdrawOptions();
      drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR);
 
      // ON SPECIFIE LA DIV D INSERTION DU SNIPPET
      searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
 
      // LA RECHERCHE
      searchControl.execute("une recherche de test");	  
 
      var titre = new Array();
      var texte = new Array();
      var url = new Array();
 
      titre = document.getElementById('searchcontrol').getElementsByClassName('gs-title');
      texte = document.getElementById('searchcontrol').getElementsByClassName('gs-snippet');
      url = document.getElementById('searchcontrol').getElementsByClassName('gs-visibleUrl gs-visibleUrl-short');
 
     // ON EXECUTE LA RECHERCHE
      searchControl.execute("une recherche de test");	  
 
	  // ON ENVOI LES RESULTATS A MA FONCTION QUAND LE CHARGEMENT EST TERMINE
	  searchControl.setSearchCompleteCallback(this, redraw_donnees(), googlewebSearch.results);
    }
 
	// LORSQUE LA REQUETTE EST CHARGEE ON RAPPELLE LA FONCTION OnLoad (pour la navigation page/page j'imagine)
    google.setOnLoadCallback(OnLoad);
 
 
        // LA FONCTION QUI RECUPERE LES DONNEES RENVOYEES PAR GOOGLE
	function redraw_donnees(results){
 
          // arguments[0] UNDEFINED
          alert(arguments[0]);
 
          // TEST QUI FONCTIONNE 
          alert("fin de traitement ok");
	}
    //]]>
    </script>
</head>
<body>
<div id="searchcontrol">Loading...</div>
</body>
</html>

05/07/2008, 21h13
SpaceFrog

tu ne peux pas passer un tableau, tu ne peux passer que du string ...

passe une chaine avec séparateur et split coté javascript

J'ai pas réussi à récupérer les résultats directement à partir du searchControl de l'API google du coup, je suis passé par le DOM en identifiant sa structure, je récupére tout sans soucis. Je suis quand même frustré de ne pas avoir copris cette méthode d'accès au tableau des résultats : http://code.google.com/apis/ajaxsear...ntrolCallbacks

Voici mon code :

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
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
95
 
<!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">
<head>
<title>My Google AJAX Search API Application</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAMSqmfofB37D7CzKiAFnEoBS3vFtSzJjGAykSs6v5CF6--iIEDhQ_MQ-Ph7O_YO9XRC3KR9iY9R22gQ" type="text/javascript"></script>
<script src="../js/prototype-1.6.0.2.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
    //<![CDATA[
 
	// LE SCRIPT GOOGLE
    google.load("search", "1", {"language" : "fr"});
 
 
    function OnLoad() {
      // L'OBJET DE CONTROLE DE RECHERCHES (WEB, LIVRES ...)
      var searchControl = new google.search.SearchControl();
 
	  // LES OPTIONS D AFFICHAGE DU CONTROLE DE RECHERCHES
	  var options = new GsearcherOptions();
	  options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
 
      // L'OBJET DE RECHERCHE SUR LE WEB
	  var googlewebSearch = new GwebSearch();
      searchControl.addSearcher(googlewebSearch, options);
 
	  // MODE DE REPRESENTATION ... (voir doc)
	  var drawOptions = new GdrawOptions();
	  drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR);
 
      // ON SPECIFIE LA DIV D INSERTION DU SNIPPET
      searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
 
      // ON EXECUTE LA RECHERCHE
      searchControl.execute("une recherche de test");	  
 
	  // ON ENVOI LES RESULTATS A MA FONCTION QUAND LE CHARGEMENT EST TERMINE ET AU PASSAGE ON ESSAYE DE PASSER L OBJET QUI CONTIENT NORMALEMENT LES RESULTATS DE LA REQUETE
	  searchControl.setSearchCompleteCallback(this, redraw_donnees, googlewebSearch);
 
    }
 
	// LORSQUE LA REQUETTE EST CHARGEE ON RAPPELLE LA FONCTION OnLoad (pour la navigation page/page j'imagine)
    google.setOnLoadCallback(OnLoad);
 
 
	// LA FONCTION QUI RECUPERE LES DONNEES RENVOYEES PAR GOOGLE
	function redraw_donnees(googlewebSearch){
		var titre = new Array();
		var texte = new Array();
		var url = new Array();
 
     // ICI alert(googlewebSearch); me renvoi un Objet
    //	MAIS alert(googlewebSearch.results[0].url); ne fait rien (pas de popup)
 
		var element;
 
		$$('a.gs-title').each(function(p){
			element=p.firstChild;
			while(element!=null){
				if (element.nodeType == Node.TEXT_NODE){ titre.push(element.data);}
				// ON NE PRENDS PAS LES SOUS BALISES  <b>
				else {titre.push(element.firstChild.data);}
				element = element.nextSibling;
			}
		});
 
		$$('div.gs-visibleUrl-long').each(function(p){
			element=p.firstChild;
			while(element!=null){
				if (element.nodeType == Node.TEXT_NODE){ titre.push(element.data);}
				// ON NE PRENDS PAS LES SOUS BALISES  <b>
				else {titre.push(element.firstChild.data);}
				element = element.nextSibling;
			}
		});
 
 
		$$('div.gs-snippet').each(function(p){
			element=p.firstChild;
			while(element!=null){
				if (element.nodeType == Node.TEXT_NODE){ titre.push(element.data);}
				// ON NE PRENDS PAS LES SOUS BALISES  <b>
				else {titre.push(element.firstChild.data);}
				element = element.nextSibling;
			}
		});
 
	}
    //]]>
    </script>
</head>
<body>
<div id="searchcontrol">Loading...</div>
</body>
</html>