Variable API google map JS avec bdd

Version imprimable

Bonjour,

Je cale depuis quelques jours à cause d'un petit souci.. Je n'y arrive pas..

Voici mon problème : J'utilise l'API google maps pour situer la ville par rapport à mon IP. Ceci en JS.. jusque là tout va bien :)

Mais ensuite je souhaite utiliser cette variable pour acquérir la latitude et la longitude (qui sont inscrits dans ma bdd) sauf que la variable créé en JS n'est pas reconnu...

Comment faire? Doit-on être contraint d'utiliser Ajax ? j'ai essayé vainement de m'y mettre mais je pige pas encore tout..

Alors si vous avez la solution... je suis preneur ... :)

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 <html> <head> <script src="https://www.google.com/jsapi?key=votre cle google api" type="text/javascript"></script> <script type="text/javascript"> function initialize() { var toto = "Ma ville: " + google.loader.ClientLocation.address.city +"<br>"; document.getElementById("test_gloader").innerHTML = toto; } </script> </head> <body onload="initialize()"> <div id="test_gloader">Patientez...</div> <? $serveur = "localhost"; $utilisateur = "root"; $motDePasse = "root"; $base = "mysql"; mysql_pconnect($serveur, $utilisateur , $motDePasse) or die("Impossible de se connecter au serveur de bases de données."); mysql_select_db($base) or die("Base de données non trouvée."); $query2="SELECT * FROM villes_france_free WHERE VILLE = '$toto' "; $result2 = mysql_query ($query2); if ($row2=mysql_fetch_array($result2)) { echo"$row2[latitude]"; echo"$row2[longitude]"; } ?> </body> </html>

25/01/2015, 23h25
ryan

Yop!

Ce passage reste nébuleux après plusieurs lectures:

Citation:

Envoyé par gaticho

Voici mon problème : J'utilise l'API google maps pour situer la ville par rapport à mon IP. Ceci en JS.. jusque là tout va bien

Mais ensuite je souhaite utiliser cette variable pour acquérir la latitude et la longitude (qui sont inscrits dans ma bdd) sauf que la variable créé en JS n'est pas reconnu...

D'où sort la variable dont tu parles?
25/01/2015, 23h31
gaticho

Bonjour :)

je parle de la variable "toto" qui est créé sous JS dont je veux me servir pour la bdd
26/01/2015, 09h11
ryan

Yop!

La variable toto est créée côté client à la fin du chargement de la page par le navigateur, et tu voudrais que le code PHP en tienne compte, alors que ce code a été interprété côté serveur avant d'envoyer le page.

La seule solution pour traiter une variable JS en PHP est d'utiliser AJAX pour appeler le code PHP sur le serveur, qui va traiter la variable et renvoyer une réponse que tu pourras utiliser à ton gré.
26/01/2015, 10h53
gaticho

Bonjour Ryan !

Je me doutais qu'il fallait utiliser Ajax.. Je t'avoue que je suis débutant, j'ai essayé, j'ai essayé .. mais je n'y arrive pas .. même avec tous les tutus que j'ai pu trouver..

Je te demande pas de me faire un code tout fait, mais pourrais tu me donner quelques indices.. ?

merci merci

Yop!

AJAX est basé sur l'objet XMLHttpRequest et sa capacité à dialoguer avec un script côté serveur.

Dans ton cas, le premier élément du processus est la page qui crée la variable toto. Cette variable doit être passé en paramètre à la fonction getCoord() qui va :
- créer l'objet XMLHttpRequest
- ensuite faire une requête vers un script côté serveur en lui passant le paramètre
- et pour finir traiter ce que renvoie le script côté serveur

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
 
<html>
<head>
<script src="https://www.google.com/jsapi?key=votre cle google api" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
        var toto = "Ma ville: "  + google.loader.ClientLocation.address.city +"<br>";
        document.getElementById("test_gloader").innerHTML = toto;
        getCoord(toto);
}
 
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 
        { 
                alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
                xhr = false; 
        } 
        return xhr;
}
 
function getCoord(laville) {
        var xhr = getXhr();
        xhr.onreadystatechange = function()
        {
                if(xhr.readyState == 4 && xhr.status == 200)
                {
                        reponse = xhr.responseText;
                        document.getElementById("coordonnees").innerHTML = reponse;
                }
        }       
 
        xhr.open("POST","find_coord_in_db.php",true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send("ville="+laville);     
}
</script>
</head>
<body onload="initialize()">
<div id='test_gloader'></div>
<div id='coordonnees'></div>
</body>
</html>

La page find_coord_in_db.php :

Code:

1
2
3
4
 
$toto = $_POST["ville"];
.... traitement PHP...
echo $row2["latitude"] . "/" . $row2["longitude"];

Tu devrais alors te retrouver avec la latitude et la longitude séparées par un slash dans la div "coordonnees".

Deux conseils:
- lire la doc et comprendre les propriétés ( readyState et status ) et les méthodes (open, setRequestHeader et send) de l'objet XMLHttpRequest
- créer un bête formulaire HTML dont l'action pointe sur ton script PHP, lui transmettre en POST un paramètre valable dans un champ "ville" pour tester le retour de ton script PHP. En cas d'erreur, c'est toujours bon de savoir que ça ne vient pas du script PHP.

Merci Ryan pour toute ton aide !

Néanmoins, j'ai plusieurs questions : (désolé, je suis vraiment néophyte)

1) J'aimerais que sur la page html, on affiche ce qu'il y a dans le php ( echo $row2["latitude"] . "/" . $row2["longitude"]; )
2) faut-il inclure sur la page html, un include('find_coord_in_db.php') ?

J'ai essayé mais ça ne marche pas, je ne comprends pas..

Voici le code avec tes modifs :

page html

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
 
<html>
<head>
<script src="https://www.google.com/jsapi?key=votre cle google api" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
	var toto = "Ma ville: "  + google.loader.ClientLocation.address.city +"<br>";
	document.getElementById("test_gloader").innerHTML = toto;
	getCoord(toto);
}
 
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 
	{ 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
}
 
function getCoord(laville) {
	var xhr = getXhr();
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			reponse = xhr.responseText;
			document.getElementById("coordonnees").innerHTML = reponse;
		}
	}	
 
	xhr.open("POST","find_coord_in_db.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("ville="+laville);	
}
</script>
</head>
<body onload="initialize()">
<div id='test_gloader'></div>
<div id='coordonnees'></div>
<?
include('find_coord_in_db.php')
 
?>
</body>
</html>

page 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
 
<?
 
$serveur     = "localhost";
$utilisateur = "root";
$motDePasse  = "root";
$base        = "mysql";
 
 
 
mysql_pconnect($serveur, $utilisateur , $motDePasse) 
or die("Impossible de se connecter au serveur de bases de données.");
mysql_select_db($base) 
or die("Base de données non trouvée.");
 
 
 
 
$toto = $_POST["ville"];
$query2="SELECT * FROM villes_france_free WHERE VILLE = '$toto' ";
$result2 = mysql_query ($query2);
 
if ($row2=mysql_fetch_array($result2)) { 
 
 
	echo $row2["latitude"] . "/" . $row2["longitude"];
}
 
 
 
?>

voilou voilou :(

26/01/2015, 13h06
ryan

Yop!

Tu ne dois pas inclure le fichier PHP, il est appelé par la méthode open de l'objet XMLHttpRequest.

Pour déboguer:
- comme je te l'écrivais, teste ton code PHP en "stand alone" en l'appelant de façon conventionnelle: un FORM html avec un paramètre valable dans un champ appelé "ville".
- teste ton appel AJAX sur un code PHP qui fait un simple echo de ce qu'il reçoit.
- ajoute des alert() ou des console.log (sur Firefox) dans la fonction getCoord pour tester 1) si elle s'exécute 2) quelle est la valeur du paramètre qu'elle reçoit 3) quel est le status et le readyState 4) qu'est-ce qu'il y a dans xhr.responseText, etc...
26/01/2015, 13h30
gaticho

Citation:

Envoyé par ryan

Yop!

Tu ne dois pas inclure le fichier PHP, il est appelé par la méthode open de l'objet XMLHttpRequest.

Pour déboguer:
- comme je te l'écrivais, teste ton code PHP en "stand alone" en l'appelant de façon conventionnelle: un FORM html avec un paramètre valable dans un champ appelé "ville".
- teste ton appel AJAX sur un code PHP qui fait un simple echo de ce qu'il reçoit.
- ajoute des alert() ou des console.log (sur Firefox) dans la fonction getCoord pour tester 1) si elle s'exécute 2) quelle est la valeur du paramètre qu'elle reçoit 3) quel est le status et le readyState 4) qu'est-ce qu'il y a dans xhr.responseText, etc...

Merci je vais tester ça.. :) je reviens vers toi dans quelques instants :)
26/01/2015, 13h52
gaticho

Re-Bonjour Ryan :)

Tout marche ! c'est vraiment top !

Merci infiniment pour ton implication et ta générosité
26/01/2015, 14h35
ryan

Yop!

Si tout fonctionne, un petit coup de :resolu: alors?
26/01/2015, 14h38
gaticho

done!