[Résolu] JQuery : Récupérer et traiter un retour JSON

Bonjour à toutes et tous,

Question rapide. J'ai un fichier php qui me renvoi un retour JSON avec un contenu que j'ai besoin de traiter. Hors je ne sais pas comment faire.

Dans ce retour j'ai 2 élements : 1 status (ok ou ko), et une url.

Je cherche a récupérer l'url {url : http://...} afin de m'en servir mais je ne connais pas la façon d'utiliser le contenu d'un retour JSON. Je sais juste déclencher des évènements via un callback si mon JSON est égal à telle ou telle valeur.

Need Help
Modifié par Klesk (27 Sep 2012 - 18:35)

Bonjour,

Bah soit tu te code un truc from scratch, ce qui peut être assez complexe, soit tu utilises pour ça des lib déjà existante :

http://mootools.net/docs/core/Utilities/JSON

http://api.jquery.com/jQuery.getJSON

Merci pour ta réponse mais j'avoue ne pas avoir trop compris ce qu'elle est censée m'apporter. Dans le titre de mon post j'indique justement que j'utilise JQuery... et en l'occurence je ne vais pas chercher un fichier .json mais je reçois un retour json depuis du php... donc le getJSON...

Je cherche juste la syntaxe pour exploiter le contenu de ce retour JSON.
Modifié par Klesk (26 Sep 2012 - 14:01)

Et bien si tu es sous jQuery, http://api.jquery.com/jQuery.getJSON est la pour ça.

Que ce soit un fichier .json, un fichier .txt, ou du php c'est pareil, c'est le contenu qui est important. Et si le contenu est du json, et bien utilise getJSON pour exploiter ce contenu.

J'ai du mal comprendre l'utilisation de getJSON alors. Cette méthode demande une url, comme tout GET en gros, que je n'ai pas dans le cas présent puisque mes données (image) sont envoyées en amont en post. Je reçois donc uniquement un retour json que je devrai pouvoir exploiter via un callback. Sauf que mon souci c'est que dans ce callback je ne sais pas comment récupérer tel ou tel élément de ce fameux retour json.

Si tu as des précisions je suis preneur.
Modifié par Klesk (26 Sep 2012 - 14:27)

Pas sûr de comprendre : si ça peut t'aider parseJSON

Salut,

Moi j'ai pas comprit comment il arrive ce JSON .
Il est déjà dans une variable du script ou il y a de l'ajax ?
Et c'est du JSON ou une chaîne formater en JSON ? Pour le dernier point, il y a JSON.parse() ou jQuery.parseJSON().

Après si c'est l'utilisation d'un objet json qui te perturbes, considère le comme n'importe quel objet java-script:

var monjson. = {url: "…", status: …}
//...
affiche(monjson.url)

Alors en résumé :

1. J'ai un formulaire d'upload d'image utilisant JQuery et jquery.filedrop.js.
2. Mon post est envoyé a un fichier php qui se charge de traiter l'upload, de renommer l'image, et de renseigner son url en BDD dans une table concernant un produit.
3. Une fois le traitement effectué, le fichier php me fait un retour json de la forme {"status":"ok","url":"urldufichier"}.
4. Je récupère l'url du fichier dans le json afin de faire le refresh d'un div en appelant le fichier qui vient d'être uploadé.

C'est la partie 4 que je ne sais pas faire .

L'API de filedrop permet déjà un callback avec uploadFinished:function(i,file,response){};, il me reste juste a savoir quoi y mettre

uploadFinished:function(i,file,response){
	$.data(file).addClass('done');
	// response is the JSON object that post_file.php returns
},

Dans ce callback on me dit que response est censé être l'objet JSON retourné par mon fameux fichier php. Hors je n'arrive pas à l'exploiter pour en sortir la valeur correspondant au champ url :
Modifié par Klesk (26 Sep 2012 - 16:36)

au pif, le json retourné est invalide. Par exemple, les clefs doivent être entre guillemets simple ou double contrairement au js où c'est optionnel.

Klesk log `arguments` et dis nous ce que ça te donne.

D'après la doc du plugin https://github.com/weixiyen/jquery-filedrop la réponse est déjà en json.

donc tu n'as plus qu'a la traiter comme un objet.

    uploadFinished: function(i, file, response, time) {
        // response is the data you got back from server in JSON format.
    },

Modifié par MrJO (27 Sep 2012 - 07:25)

Vaxilart a écrit :
Klesk log `arguments` et dis nous ce que ça te donne.

Alors une fois 'arguments' logué j'obtiens les éléments suivants durant l'upload :


http://imageshack.us/a/img820/8193/dropfile.jpg


En 2 on constate le retour JSON avec le statut de l'upload et l'url du fichier sur le serveur. La fameuse url que je veux récupérer de façon à m'en servir.
Modifié par Klesk (27 Sep 2012 - 10:02)

Salut,

Ton objet JSON est un tableau et, apparemment, la valeur souhaitée se trouve dans un objet à l'index 2, dans la propriété "url".

A priori, "response[2].url" devrait te donner le truc...

tm

Il me dit que response is not defined

Voici la fonction concernée :

$(function(){
	var dropbox = $('#dropbox'),
		message = $('.message', dropbox);
	
	dropbox.filedrop({
		// The name of the $_FILES entry:
		paramname: modele,
		data: {imei: imeinumber},
		maxfiles: 1,
		maxfilesize: 0.29296875,
		url: 'http://www.monurl.com/emm/utilisateurs/post_file.php',
		
		uploadFinished:function(i,file,response){
			$.data(file).addClass('done');
			// response is the JSON object that post_file.php returns
			console.log( arguments );

		},
		
		error: function(err, file) {
			switch(err) {
				case 'BrowserNotSupported':
					showMessage('Votre navigateur ne supporte pas l\'upload HTML5 !');
					break;
				case 'TooManyFiles':
					alert('Trop de fichiers !');
					break;
				case 'FileTooLarge':
					alert(file.name+' est trop volumineux! Le maximum autorisé est 300Ko.');
					break;
				default:
					break;
			}
		},
		
		// Called before each upload is started
		beforeEach: function(file){
			if(!file.type.match(/^image\//)){
				alert('Seules les images sont autorisées!');
				
				// Returning false will cause the
				// file to be rejected
				return false;
			}
		},
		
		uploadStarted:function(i, file, len){
			createImage(file);
		},
		
		progressUpdated: function(i, file, progress) {
			$.data(file).find('.progress').width(progress);
		}
		 
	});
	
	var template = '<div class="preview">'+
						'<span class="imageHolder">'+
							'<img />'+
							'<span class="uploaded"></span>'+
						'</span>'+
						'<div class="progressHolder">'+
							'<div class="progress"></div>'+
						'</div>'+
					'</div>'; 
	
	
	function createImage(file){

		var preview = $(template), 
			image = $('img', preview);
			
		var reader = new FileReader();
		
		image.width = 100;
		image.height = 100;
		
		reader.onload = function(e){
			
			// e.target.result holds the DataURL which
			// can be used as a source of the image:
			
			image.attr('src',e.target.result);
		};
		
		// Reading the file as a DataURL. When finished,
		// this will trigger the onload function above:
		reader.readAsDataURL(file);
		
		message.hide();
		preview.appendTo(dropbox);
		
		// Associating a preview container
		// with the file, using jQuery's $.data():
		
		$.data(file,preview);
	}

	function showMessage(msg){
		message.html(msg);
	}

});

Modifié par Klesk (27 Sep 2012 - 15:15)

Je suis vraiment, mais alors vraiment... trop con ^^.

uploadFinished:function(i,file,json){
	$.data(file).addClass('done');
	var url = json.url;
	// response is the JSON object that post_file.php returns
	$('#illustration').html('<legend>Illustration</legend><div style="float:left;margin:10px 5px 10px 0;"><img src="' + url + '" /></div><div id="dropbox"><span class="message">D&eacute;posez votre image ici. Formats jpg/png autoris&eacute;s, max 300ko, format carr&eacute;.</span></div>');
}

response c'est une mention type qui est décrite dans l'api...

Donc en gros ça marche maintenant. En revanche il subsiste un problème. Mon image uploadée, si elle remplace une image existante, aura le même nom et la même url que la précédente. Le souci c'est que du coup le navigateur va me chercher l'image dans son cache. Comment forcer le fait qu'il recharge l'image ?

EDIT : Ca marche en ajoutant ?id=1 derrière l'url de mon image. Ca contourne le souci de cache mais c'est pas propre. Y a t-il un moyen en js, de supprimer cette image précisément du cache ?

EDIT 2 : Je vais ajouter un timestamp dans l'url qui est envoyée en bdd et l'envoyer dans mon retour json. Comme ça je force le browser a recharger l'image sauf qd ya pas d'upload
Modifié par Klesk (27 Sep 2012 - 16:32)