Tableau PHP vers JavaScript

Version imprimable

Bonjour à tous,

J'ai tapé ce code, mais le parse de l'objet Json ne fonctionne pas.
J'ai certainement fait une erreur, mais laquelle ?

Voici le fichier index.php
_____________________________________________________________________________________________________________

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete jQuery</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
</head>
<body>
 
<form name="Form_Utilistateur" action="autocompletion.php" method="POST" >
     ETAPE 1<input type="text" name ="Champ1" id="Champ1" onmouseover="autocomplet()" autocomplete="off"/>
		<ul id="Liste_Champ1"></ul></br>
     ETAPE 2<input type="text" name ="Champ2" id="Champ2" onmouseover="affichageParse()" autocomplete="off"/>
		<ul id="Liste_Champ2"></ul></br>
               <input type="submit" value="JSON" name="B1">
</form>
</body>
</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
var variable1="blabla";
var tab2 = new Array();
var a=0;
 
function autocomplet(){
	$.ajax({
		type: 'POST',
		url: 'autocompletion.php',
		data: {variable1:variable1},		
		dataType: 'json',
		success:function(donnee){
			tab2= JSON.parse(donnee);
			$('#Liste_Champ1').show();
			$('#Liste_Champ1').html(tab2["clef0"]);
		},
		error:function(msg){
                       	alert( "Error !: " + msg);
                }
	});
}
function affichageParse() { 
	$('#Liste_Champ2').show();
	$('#Liste_Champ2').html('<font color="red">'+variable1+'</font>');
}

et voici la repose serveur PHP (autocompletion.php)

Code:

1
2
3
4
5
6
7
8
<?php
$_POST['variable1']="blabla";
if (isset($_POST['variable1'])){
	header('Content-type: application/json');
	$list = array("clef0"=>"valeur1","clef1"=>"valeur2","clef2"=>"valeur3","clef3"=>"valeur4",);
	echo json_encode($list);
}
?>

echo json_encode($list) donne en Json {"clef0":"valeur1","clef1":"valeur2","clef2":"valeur3","clef3":"valeur4"}apparament c'est correct le Framework que j'utilise c'est jquery-1.11.1.js

D'avance merci :merci:

Note: désolé pour la présentation du code mais je debute et je ne sais pas comment afficher les fonctions et variables en couleurs....

18/09/2014, 14h10
Bovino

A partir du moment où tu précises dans la requête dataType: 'json', jQuery se charge tout seul de parser la réponse reçue, du coup, tab2= JSON.parse(donnee); va tenter de parser un objet, ce qui provoque une erreur.

Ce que tu aurais pu voir directement en regardant la console de débogage du navigateur (F12).

Bovino,

Je ne sais pas comment te remercier:rose2:
j'ai donc remplacé, le code dans javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function autocomplet(){
	$.ajax({
		type: 'POST',
		url: 'autocompletion.php',
		data: {variable1:variable1},		
		dataType: 'json',
		success:function(donnee){
			tab2= JSON.parse(donnee);
			$('#Liste_Champ1').show();
			$('#Liste_Champ1').html(tab2["clef0"]);
		},
		error:function(msg){
                       	alert( "Error !: " + msg);
                }
	})

;

par:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function autocomplet(){
		$.ajax({
			type: 'POST',
			url: 'autocompletion.php',
			data: {variable1:variable1},
			dataType: 'json',
			success:function(donnee){
 
						$('#Liste_Champ1').show();
						$('#Liste_Champ1').html(donnee["clef3"]);
			},
    			error:function(msg){
                            	alert( "Error !: " + msg);
                    }
		});
 
}

Et ça fonctionne !!!!!
Un grand merci aussi pour la baguette magique F12, utile sur IE v8, Chrome v37 et Firefox v32...

Au plaisir, de te rencontrer, à nouveau sur le forum de developpez.net