Récupérer les données avec json

**Rony Rauzduel** · 06/11/2012, 16h05

Bonjour à toutes et à tous,

J'utilise $.ajax({}) pour effectuer un appel Ajax en passant des données que je souhaite recevoir en json.

Code Javascript :

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
 
/** script traitant de l'affichage de la zone d'inscription */
$(document).ready(function() {
	$("#inscription").click(function() {
		$("#inscriptionForm").fadeIn("fast");		
		// pour la soumission du formulaire
		$("#sendInscription").submit(function(e) {
			// pendant la soumission on affiche le loader d'attente Ajax
			$("#loader").show();
			e.preventDefault(); // empêcher le navigateur de soumettre lui-même le formulaire			
 
			// pour l'appel Ajax puisqu'on veut rester sur la même page suite à la soumission
			// lors de l'appel Ajax la référence #inscriptionForm sera perdu il faut donc la réaffecter
			var $this = $(this);  
			datatosend=$this.serialize(); // on sérialise les données à envoyer sur le serveur		
			$.ajax({				
				url: $this.attr('action'),
				type: $this.attr('method'),
				data: datatosend,
				dataType: 'json', 
				cache: false,
				error: function() { 
					$("#loader").hide();
					alert("erreur lors du processus d'enregistrement de l'inscription !");					 
				},
				success: function(json){																				 	
							$("#loader").hide(); // on cache le loader d'attente Ajax
							$("#inscriptionForm").fadeOut(); // on cache le formulaire
							if(json.type == 'success') 
								$("#inscriptionSent").show('slow'); 
 
						 } // fin function(json)		
			}); // fin $.ajax()						
		}); // fin $("#inscriptionForm").submit()				
	}); // fin $("#inscription").click()
}); // fin $(document)
 
//$('#inscriptionSent').show('slow'); 
//setTimeout('$("#inscriptionSent").hide(); $("#inscriptionForm").fadeOut("slow")', 2000);
//console.log(retour);

inc_ajoutMembre.php

Code PHP :

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
 
<?php
 
	require_once 'inc_connexion.php';
	$conn=opendb(); // on se connecte à la Base de données	
 
	/** script permettant l'insertion d'un Membre en Base , ce script devra vérifier que le login n'est pas déjà présent en Base.
		Le Pseudo choisi par le futur membre sera le pseudo intégré en Base. Il faudra par ailleurs envoyé un mail au membre
		afin de lui communiquer son login et son password après validation de l'unicité du login en base.
	*/
 
	// variables correspondant aux champs présents en base
	// utilisation de l'opérateur ternaire ?: pour assigner les variables aux valeurs des champs du formulaire
	$pseudo = (isset($_POST['pseudo']))?$_POST['pseudo']:null; 
	$pseudo=htmlentities(trim($pseudo));
	$password = (isset($_POST['password']))?$_POST['password']:null;
	$password = sha1($password);
	$anneNaiss = (isset($_POST['anneeNaiss']))?$_POST['anneeNaiss']:null;
	$anneeNaiss = htmlspecialchars($_POST['anneeNaiss']);	
	$email = (isset($_POST['email']))?$_POST['email']:null;
	$email  = htmlspecialchars($_POST['email']); // On rend inoffensives les balises HTML que le visiteur a pu rentrer
	$telephone = (isset($_POST['telephone']))?$_POST['telephone']:null;
	$telephone = htmlspecialchars($_POST['telephone']);// On rend inoffensives les balises HTML que le visiteur a pu rentrer
	$masquerTel = (isset($_POST['masquerTel']))?$_POST['masquerTel']:null;	
	$region = (isset($_POST['region']))?$_POST['region']:null;
	$cle = sha1(microtime(TRUE)*100000);	
	$actif = 0;
 
	// requête pour l'insertion du producteur en base
	$req = 
		"insert into membres 
			values(null,:pseudo,:password,:annee_naissance,:email,:telephone,:masquerTel,:region,CURDATE(),:cle,:actif)";
	// on prépare le traitement de la requête
	$stm=$conn->prepare($req);
	// Tentative d'insertion en base d'un nouveau producteur en utilisant le mode transactionnel
	// bloc try ... catch()
	$response = array('type'=>'', 'message'=>'');
	try {
		// on associe les marqueurs nommés avec les variables crées plus haut
		$stm->bindParam(':pseudo', $pseudo, PDO::PARAM_STR);
		$stm->bindParam(':password', $password, PDO::PARAM_STR);
		$stm->bindParam(':annee_naissance', $anneeNaiss, PDO::PARAM_STR);
		$stm->bindParam(':email', $email, PDO::PARAM_STR);
		$stm->bindParam(':telephone', $telephone, PDO::PARAM_STR);
		$stm->bindParam(':masquerTel', $masquerTel, PDO::PARAM_STR);
		$stm->bindParam(':region', $region, PDO::PARAM_STR);
		$stm->bindParam(':cle', $cle, PDO::PARAM_STR);
		$stm->bindParam(':actif', $actif, PDO::PARAM_INT);
		// exécution de la requête
		$stm->execute();					
		// on affiche un message
		$response['type'] = 'success';
		$response['message'] = 'Thank-You for submitting the form!';
 
		//print '<div style="color:#132959">Inscription réussie! <br />Un email de confirmation est en cours d\'envoi ... </div>';
		//header( "refresh:3;url=http://localhost/clothesBusiness/index.php" );
 
	} catch(PDOException $e) {				
		// on affiche un message d'erreur
		print '</br>';
		$response['type'] = 'error';
		$response['message'] = $e->getMessage();
		print "Erreur lors de l'insertion en base !: ". $e->getMessage() . "</br>";		
		header( "refresh:7;url=http://localhost/clothesBusiness/index.php" ); 
	} // fin bloc try ... catch()	
	print json_encode($response);
	exit;
 
 
?>

inc_verification.php, le code appelant le fichier inc_ajoutMembre

Code PHP :

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
 
<?php
	/* script vérifiant la validité des informations saisis par l'utilisateur **/
	/* si la variable submit est définie, on inclus le fichier permettant l'injection SQL 
		vérifier que le champ submit du formulaire possède l'attribut name="submit"
		vérification de la validité des valeurs des champs saisis par l'utilisateur **/
 
	if(isset($_POST['password']) && isset($_POST['verifPassword'])) { // si toutes les valeurs des champs sont définies 
		if(!empty($_POST['password']) && !empty($_POST['pseudo'])) { // si la valeur des champs login et password ne sont pas vides alors
			if($_POST['password'] == $_POST['verifPassword']) { // si les valeurs des champs sont équivalentes alors
				// filtre de validation d'une adresse email (cf. Manuel PHP)
				if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { // si le champ email est bien définie alors					 
						if (isset($_POST['submit'])) { // si le bouton submit est définie							
							require_once 'inc_ajoutMembre.php'; // inclusion du script d'ajout d'un producteur en base													
						} // au clique sur le bouton submit j'inclus le script d'injection SQL	
				} else { // sinon
					print '<div style="color:#B9121B">Votre adresse email est invalide ! </div>'; // affichage d'un message d'avertissement pour l'adresse email					
					header( "refresh:2;url=http://localhost/clothesBusiness/index.php" ); // redirection vers la page d'adhesion
				} //if(filter_var())				
			} else {
				print '<div style="color:#B9121B">Vos mots de passe ne correspondent pas ! </div>';	// affichage d'un message d'avertissement pour les mots de passe
				header( "refresh:2;url=http://localhost/clothesBusiness/index.php" );
			}
		} else {
			print '<div style="color:#B9121B">Votre login et/ou votre mot de passe sont vides ! </div>'; // affichage d'un message d'avertissement pour les mots de passe
			header( "refresh:2;url=http://localhost/clothesBusiness/index.php" );
		} // fin if(!empty($_POST['password']) && !empty($_POST['login']))
	}
 
?>

la partie success du fichier afficherZoneRegister.js ne s'effectue jamais et le print présent dans le fichier inc_ajoutMembre s'affiche à chaque fois.

Merci d'avance.
Transact.

**Rony Rauzduel** · 06/11/2012, 17h54

Le problème est davantage un problème de logique dans mon code PHP. Je regarde de ce côté pour revenir ... ou pas vers vous.

Transact.

**Rony Rauzduel** · 08/11/2012, 09h56

Bonjour ,

Mon but est d'afficher les réponses d'une requête AJAX qui ont été envoyées au format JSON.
J'ai crée en PHP un tableau stockant des messages d'erreur, et je voudrai en fonction des saisies de l'utilisateur afficher ces messages.

Code Javascript :

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
 
// pour l'appel Ajax puisqu'on veut rester sur la même page suite à la soumission
			// lors de l'appel Ajax la référence #inscriptionForm sera perdu il faut donc la réaffecter
			var $this = $(this);  
			datatosend=$this.serialize(); // on sérialise les données à envoyer sur le serveur		
			$.ajax({				
				url: $this.attr('action'),
				type: $this.attr('method'),
				data: datatosend,
				contentType: "application/json; charset=utf-8",
				dataType:'json',				
				cache: false,
				error: function() { 
					$("#loader").hide();
					alert("erreur lors du processus d'enregistrement de l'inscription !");					 
				},
				// ici on effectue le traitement (callback) des cas présents dans le tableau $t du fichier inc_ajoutMembre.php
				success: function(data){ // data représente la totalité des données récupérées au format json
					// donc data est le tableau $t, on accède à un indice avec la notation . (comme un objet)					
					if(data.erreur = "no") { // si on n'a pas d'erreur dans le traitement du formulaire alors
						$("#loader").hide(); // on cache le loader
						//$('#inscriptionSent').show(); // on affiche le message d'inscription réussie
						$this.fadeOut("slow"); // on cache le formulaire						
					} else { // sinon on traite les erreurs
 
					}					 
				}, // function(data)				
 
			}); // fin $.ajax()

en PHP

Code PHP :

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
 
// json permet de faire le pont entre Javascript et PHP
	$t = array(); // tableau permettant le traitement des données avec json
	$t["erreur"] = "Formulaire incorrect";	
 
	// on vérifie que les mots de passe correspondent
	// si le champ du mot de passe n'est pas vide et que les valeurs des champs sont équivalentes alors
	if(!empty($password) && ($password == $verifPassword)) { 
		$password = sha1($password);
	}  else {
		// affichage d'un message d'avertissement pour les mots de passe
		//print '<div style="color:#B9121B">Vos mots de passe ne correspondent pas !</div>';
		$t["erreurPassword"] = 'Vos mots de passe ne correspondent pas !';
	} // fin if(!empty($password) && ($password == $verifPassword))
 
	// on vérifie si le pseudo est dans la table  
	// on récupère le nombre d'occurence présente de la clause where
	$sql = "select count(*) as nbr from membres where pseudo ='".$_POST['pseudo']."'";
	$stmt=$conn->prepare($sql);
	$stmt->execute();
	// creation de la variable $result recuperant les lignes et les retournant EN TANT que tableau associatif
	$result=$stmt->fetch(PDO::FETCH_ASSOC);
	//print_r($result); // pour le test
	if(!($result['nbr']) == 0) { // si le nombre d'occurrence du résultat de la requête n'est pas nul alors
		//print '<div style="color:#B9121B">Ce pseudo existe ! Veuillez saisir un autre pseudo.</div>';
		//header( "refresh:3;url=http://localhost/clothesBusiness/index.php" );
		// on crée un indice dans le tableau PHP permettant de récupérer le message et de l'afficher sur le poste client équipé de Javascript 
		$t["erreurLogin"] = 'Ce pseudo existe déjà! Veuillez saisir un autre pseudo.';
	} else {
		// requête pour l'insertion du producteur en base
		$req = 
			"insert into membres 
				values(null,:pseudo,:password,:annee_naissance,:email,:telephone,:masquerTel,:region,CURDATE(),:cle,:actif)";
		// on prépare le traitement de la requête
		$stm=$conn->prepare($req);	
		// Tentative d'insertion en base d'un nouveau producteur en utilisant le mode transactionnel
		// bloc try ... catch()	
		try {
			$conn->beginTransaction();
			// on associe les marqueurs nommés avec les variables crées plus haut
			$stm->bindParam(':pseudo', $pseudo, PDO::PARAM_STR);
			$stm->bindParam(':password', $password, PDO::PARAM_STR);
			$stm->bindParam(':annee_naissance', $anneeNaiss, PDO::PARAM_STR);
			$stm->bindParam(':email', $email, PDO::PARAM_STR);
			$stm->bindParam(':telephone', $telephone, PDO::PARAM_STR);
			$stm->bindParam(':masquerTel', $masquerTel, PDO::PARAM_STR);
			$stm->bindParam(':region', $region, PDO::PARAM_STR);
			$stm->bindParam(':cle', $cle, PDO::PARAM_STR);
			$stm->bindParam(':actif', $actif, PDO::PARAM_INT);
			// exécution de la requête
			$stm->execute();				
			// on commit
			$conn->commit();					
			// on affiche un message
			//print '<div style="color:#132959">Inscription réussie! <br />Un email de confirmation est en cours d\'envoi ... </div>';
			//header( "refresh:3;url=http://localhost/clothesBusiness/index.php" );
			$t["erreur"] = "no"; // utiliser lors de l'appel Ajax pour recevoir la réponse du serveur
			$t["retour"] = 'Inscription réussie! Un email de confirmation est en cours d\'envoi ...';							
		} catch(PDOException $e) {	
			// on rollback si cela se passe mal
			$conn->rollback();			
			// on affiche un message d'erreur
			print '</br>';	
			print "Erreur lors de l'insertion en base !: ". $e->getMessage() . "</br>";		
			header( "refresh:7;url=http://localhost/clothesBusiness/index.php" ); 
		} // fin bloc try ... catch()	
	} // fin if(!($result['nbr']) == 0)
 
	// Ne pas oublier d'afficher l'encodage de la représentation json des valeurs envoyées sur le serveur
	echo json_encode($t); // la fonction json_encode() retourne la représentation json d'une valeur

J'ai effectué auparavant un isset() sur les variables postées.

Merci d'avance.
Transact.

**SpaceFrog** · 08/11/2012, 10h13

essaye au lieu getJSON() au lieu de ajax ...

sinon $.parseJSON() sur le retour ....

**Rony Rauzduel** · 08/11/2012, 11h17

Je ne parviens pas à parser les données récupérées en JSON. En effet , je ne comprends pas le fonctionnement de la méthode à utiliser.

Code Javascript :

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
 
// pour l'appel Ajax puisqu'on veut rester sur la même page suite à la soumission
			// lors de l'appel Ajax la référence #inscriptionForm sera perdu il faut donc la réaffecter
			var $this = $(this);  
			datatosend=$this.serialize(); // on sérialise les données à envoyer sur le serveur		
			$.ajax({				
				url: $this.attr('action'),
				type: $this.attr('method'),
				//data: datatosend,
				data: {pseudo:$("#pseudo").val(), password:$("#password").val()},
				contentType: "application/json; charset=utf-8",
				dataType:'json',				
				cache: false,
				error: function() { 
					$("#loader").hide();
					alert("erreur lors du processus d'enregistrement de l'inscription !");					 
				},
				// ici on effectue le traitement (callback) des cas présents dans le tableau $t du fichier inc_ajoutMembre.php
				success: function(string){ // data représente la totalité des données récupérées au format json
					// donc data est le tableau $t, on accède à un indice avec la notation . (comme un objet)					
					data = $.parseJSON(string); // on parse les données JSON récupérées sur le serveur
					if(data.erreur == "no") { // si on n'a pas d'erreur dans le traitement du formulaire alors
						$("#loader").hide(); // on cache le loader
						//$('#inscriptionSent').show(); // on affiche le message d'inscription réussie
						$this.fadeOut("slow"); // on cache le formulaire						
					} else { // sinon on traite les erreurs
 
					}					 
				}, // function(data)				
 
			}); // fin $.ajax()

**SpaceFrog** · 08/11/2012, 11h28

as tu testé ce que contient ton retour ?

**Bovino** · 08/11/2012, 11h31

Code :

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

data = $.parseJSON(string);

Puisque tu indiques déjà

Code :

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

dataType:'json',

la réponse est déjà parsée, tu ne peux pas le refaire sinon, ça renvoie undefined.

**Rony Rauzduel** · 08/11/2012, 11h32

Code php :

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

1
2
 
$t["retour"] = 'Inscription réussie! Un email de confirmation est en cours d\'envoi ...';

il faut donc mettre

Code :

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

dataType : 'text'

**Bovino** · 08/11/2012, 11h36

Non ! Il faut supprimer la ligne

Code :

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

data = $.parseJSON(string);

**SpaceFrog** · 08/11/2012, 11h38

si tu as déja un dataType json ..;
avec le parse tu tentes de reparser le retour que tu nommes à tort string ...

**Rony Rauzduel** · 08/11/2012, 11h48

Je commence à comprendre le principe,mais pourquoi le code suivant :

Code :

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

1
2
3
4
5
 
// ici on effectue le traitement (callback) des cas présents dans le tableau $t du fichier inc_ajoutMembre.php
				success: function(data){ // data représente la totalité des données récupérées au format json
					// donc data est le tableau $t, on accède à un indice avec la notation . (comme un objet)															
					if(data.erreur == "no") {

la page est redirigée vers inc_ajoutMembre.php au lieu de rester sur le formulaire, pourtant j'ai ajouté la ligne

Code :

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

$('#inscriptionSent').show().append(data.retour); // on affiche le message d'inscription réussie

**SpaceFrog** · 08/11/2012, 11h59

tu as inhibé l'envoi du form avec un preventDefault() sur le click du bouton submit ?

**Rony Rauzduel** · 08/11/2012, 12h03

Cela ne change rien même si je mets en commentaire

Code javascript :

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

e.preventDefault();

**Rony Rauzduel** · 08/11/2012, 12h09

Le problème ne viendrait-il pas des données envoyées

Code :

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

datatosend=$this.serialize();

Code :

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

data: datatosend,

?

**Rony Rauzduel** · 08/11/2012, 15h48

[Résolu]
Je suis passé par $.post en utilisant le type de sortie json en regardant la doc.

Récupérer les données avec json

jQuery

Discussions similaires

Partager

Partager