Tableau PHP vers JavaScript

**trungpa2** · 18/09/2014, 14h50

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 html :

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
<!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 :

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
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 php :

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

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

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....

**Bovino** · 18/09/2014, 15h10

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).

**trungpa2** · 18/09/2014, 23h22

Bovino,

Je ne sais pas comment te remercier

j'ai donc remplacé, le code dans javascript:

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
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 :

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
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

Tableau PHP vers JavaScript

jQuery

Vue hybride

Discussions similaires

Partager

Partager