erreur JSON pour affichage point sur carte

**devillers** · 03/10/2018, 14h20

Bonjour ,

Je souhaite intégrer une carte avec des repères en lien avec une bdd mysql (tutoriel ici); j'ai donc une bdd 'villes' avec une table 'villes' et une structure avec le nom (varchar 20) la latitude : lat (float) et la longitude lon (float).
si j'actualise la carte je n'ai pas l'apparition du point de repère , sous wamp , j'ai comme erreur dans la console :

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data[En savoir plus] test.php:34:16
initMap/<
http://127.0.0.1/ajax_crud_datatable...test.php:34:16
j
http://127.0.0.1/ajax_crud_datatable...min.js:2:26920
fireWith
http://127.0.0.1/ajax_crud_datatable...min.js:2:27738
x
http://127.0.0.1/ajax_crud_datatable...min.js:4:11251
b/<
http://127.0.0.1/ajax_crud_datatable...min.js:4:14765

index.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
<?php include 'connect.php';?><!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://127.0.0.1/ajax_crud_datatables_images_upload/assets/jquery/jquery-2.1.4.min.js"></script>
		<script src="https://maps.google.com/maps/api/js?key=AIzaSyDrzdccScwx82cSYbNMeSzpYY4hx21S3lJ" type="text/javascript"></script>
		<script async type="text/javascript">
			// On initialise la latitude et la longitude (centre de la carte)
			var lat = 43.3;
			var lon = 5.4;
			var map = null;
			// Fonction d'initialisation de la carte
			function initMap() {
	map = new google.maps.Map(document.getElementById("map"), {
		center: new google.maps.LatLng(lat, lon),
		zoom: 11,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: true,
		scrollwheel: true,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
		},
			navigationControl: true,
			navigationControlOptions: {
			style: google.maps.NavigationControlStyle.ZOOM_PAN
		}
	});
	// Nous appelons la fonction ajax de jQuery
	$.ajax({
		// On pointe vers le fichier selectData.php
		url : "http://localhost/ajax_crud_datatables_images_upload/selectData.php",
	}).done(function(json){ // Si on obtient une réponse, elle est stockée dans la variable json
		// On construit l'objet villes à partir de la variable json 
		var villes = JSON.parse(json);
		// On parcourt l'objet villes
		for(ville in villes){
			var marker = new google.maps.Marker({
				// parseFloat nous permet de transformer la latitude et la longitude en nombre décimal
				position: {lat: parseFloat(villes[ville].lat), lng: parseFloat(villes[ville].lon)},
				title: villes[ville].nom,
				map: map
			});	
		}
	});
}
			window.onload = function(){
				// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
				initMap(); 
			};
		</script>
		<style type="text/css">
			#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
				height:400px;
			}
		</style>
		<title>Carte</title>
	</head>
	<body>
		<div id="map">
			<!-- Ici s'affichera la carte -->
		</div>
	</body>
</html>

selectData.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// On prépare la requête
 
 
 
$sql = "SELECT * FROM villes";
$stmt = $dbh->prepare($sql);
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
print_r($result);
// On transforme le tableau PHP en json
$retour = json_encode($results);
 
// On retourne le tableau à la fonction appelante
echo $retour;
?>

connect.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?php
try {
    $dbh = new PDO('mysql:host=localhost;dbname=villes;charset=utf8', 'root','');
 
    $dbh = null;
} catch (PDOException $e) {
    print "Erreur !: " . $e->getMessage() . "<br/>";
    die();
}
?>

Merci pour votre aide...

**NoSmoking** · 04/10/2018, 09h19

Bonjour,
au lieu d'utiliser $.ajax() lorgne du côte de jQuery.getJSON().

Sinon passe ton objet JSON en retour au validateur et vérifie qu'il n'y a pas d'apostrophe non échappée par exemple.

**devillers** · 04/10/2018, 10h56

Salut, j'ai aussi une autre erreur dans XHRGET
http://localhost/ajax_crud_datatable...selectData.php

J'ai du mal à comprendre j'ai essayé ceci et cela m'affiche une fenêtre js.

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<?php include 'connect.php';?><!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://127.0.0.1/ajax_crud_datatables_images_upload/assets/jquery/jquery-2.1.4.min.js"></script>
		<script src="https://maps.google.com/maps/api/js?key=AIzaSyDrzdccScwx82cSYbNMeSzpyt4hx21SRST" type="text/javascript"></script>
		<script async type="text/javascript">
			// On initialise la latitude et la longitude de Paris (centre de la carte)
			var lat = 43.3;
			var lon = 5.4;
			var map = null;
			// Fonction d'initialisation de la carte
			function initMap() {
	map = new google.maps.Map(document.getElementById("map"), {
		center: new google.maps.LatLng(lat, lon),
		zoom: 11,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: true,
		scrollwheel: true,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
		},
			navigationControl: true,
			navigationControlOptions: {
			style: google.maps.NavigationControlStyle.ZOOM_PAN
		}
	});
	// Nous appelons la fonction ajax de jQuery
	$.ajax({
		type: 'GET',
		// On pointe vers le fichier selectData.php
		url : 'http://localhost/ajax_crud_datatables_images_upload/selectData.php',
		  timeout: 3000,
		success: function(data) {
 
              alert(data); },
 
            error: function() {
 
              alert('La requête n\'a pas abouti'); }
 
 
 
	})
.done(function(json){ // Si on obtient une réponse, elle est stockée dans la variable json
		// On construit l'objet villes à partir de la variable json 
		var villes = JSON.parse(json);
		// On parcourt l'objet villes
		for(ville in villes){
			var marker = new google.maps.Marker({
				// parseFloat nous permet de transformer la latitude et la longitude en nombre décimal
				position: {lat: parseFloat(villes[ville].lat), lng: parseFloat(villes[ville].lon)},
				title: villes[ville].firstName,
				map: map
			});	
		}
	});
}
 
 
 
			window.onload = function(){
				// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
				initMap(); 
			};
		</script>
		<style type="text/css">
			#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
				height:400px;
			}
		</style>
		<title>Carte</title>
	</head>
	<body>
		<div id="map">
			<!-- Ici s'affichera la carte -->
		</div>
	</body>
</html>

**NoSmoking** · 04/10/2018, 17h07

Salut, j'ai aussi une autre erreur dans XHRGET

Oui mais laquelle ?

Code :

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

1
2
3
4
$.ajax({
    type: "GET",        // pas nécéssaire valeur par défaut
    dataType: "json",   // cela évite de parser la réponse
    url : "ajax_crud_datatables_images_upload/selectData.php",

ou mieux dans ton cas, plus succint

Code :

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

1
2
3
4
$.getJSON( "ajax_crud_datatables_images_upload/selectData.php", function( data ) {
    $.each( data, function( key, val ) {
        // action à code à réaliser
    });

**devillers** · 04/10/2018, 18h25

Merci no smoking de te pencher sur mon sujet,

Il m'affiche une fenêtre la requête n'a pas abouti avec ceci :

Code :

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

1
2
3
4
$.ajax({
    type: "GET",        // pas nécéssaire valeur par défaut
    dataType: "json",   // cela évite de parser la réponse
    url : "ajax_crud_datatables_images_upload/selectData.php",

pour l'erreur XHR j'ai comme erreur la réponse

prepare($sql); $stmt->execute(); $results = $stmt->fetchAll(PDO::FETCH_ASSOC); print_r($result); // On transforme le tableau PHP en json $retour = json_encode($results); // On retourne le tableau à la fonction appelante echo $retour; ?>

**NoSmoking** · 04/10/2018, 21h39

C'est typiquement une erreur retournée lorsque l'on essaie de lire un fichier PHP sans passer par un serveur local (WAMP .. ou autre), le PHP n'est pas interprété.

erreur JSON pour affichage point sur carte

jQuery

Vue hybride

Discussions similaires

Partager

Partager