[Résolu] Récuperer plusieurs infos d'une page appelée en Ajax

[Kassak]

Hello !

Ça faisait longtemps que je n'avais pas posté !

Donc mon problème, j'ai une page php que j'appelle en Ajax, elle fait donc un traitement. La dedans je fais des echos de mes messages d'erreur, que je récupère comme cela dans la requête ajax :

document.getElementById('id').innerHTML = xhr.responseText;

Les "echos" sont donc visibles dans la div id.


Maintenant j'ai besoin de récupérer d'autres messages, qui ne sont pas des erreurs et qui ne vont donc pas dans la div id...comment faire ? =)

Merci bien !

Ps : C'est peut être simple, mais j'y est passé un moment, et Ajax n'est pas mon fort.

[Sephi-Chan]

Tu peux utiliser JSON.

Côté PHP, tu fais :

$data = array(

  'foo' => "Bar",

  'bar' => array('Endive', 'Pâté')

);



echo json_encode($data);

Et ensuite, tu n'as plus qu'à parser ton responseText pour avoir un objet Javascript utilisable.

var data = JSON.parse(xhr.responseText);

alert(data.foo);

alert(data.bar.join(', '));

Pense à inclure le script JSON2 pour pouvoir parse le JSON sur IE7.

Si tu as besoin de faire de l'Ajax plus évolué, je te conseille quand même d'utiliser jQuery. Son API est très bien et améliorera considérablement la qualité et la concision du code.

[Kassak]

Merci, mais en restant dans l'esprit ajax+php ?

[Sephi-Chan]

J'ai pas compris.

[Kassak]

Je voulais dire, ne connaissant pas Json, s'il y avait un autre moyen plus naturel =)

[Sephi-Chan]

JSON, c'est juste une façon de sérialiser des données : les représenter sous forme d'une chaîne de caractère dans le but de les transmettre à Javascript.

Essaye d'écrire ce que je t'ai mis dans un script PHP et regarde la chaîne que ça t'affiche. Ensuite, passe cette chaîne à la fonction JSON.parse dans une console Javascript.

[php_addict]

franchement j'étais comme toi: je me disais oui...euh...json...jquery..tout ca tout ca...bof bof...pas besoin

mais honnêtement cela va te prendre 15 minutes pour comprendre le format JSON et une heure tout au plus pour manipuler ajax avec jquery, et après ce n'est que du bonheur, tu ne pourra plus t'en passer !

Avant j'avais pas mal de problème en JS+AJAX avec la comptabilité entre les navigateurs et maintenant plus rien (hormis un ou deux navigateurs mobile et encore...)

et ton code sera 100 fois plus clair et léger (hormis la librairie forcement)

je me rappelle comment je galérais comme un fou sans jquery pour ce genre de truc ;-) (merci Sephi pour m'avoir ouvert les yeux à l'époque)

var data = JSON.parse(xhr.responseText);

alert(data.foo);

alert(data.bar.join(', '));

encore plus simple, même pas besoin du parser:

$(function() 

   {

   url = "ta_page.php?id=ce_que_tu_veut_comme_parametres";

   $.ajax({url: url ,

              cache: false,

               dataType: 'json',

               success:function(json){Ta_Fonction_De_Traitement_De_L_Objet_Json(json);},

               error:function(XMLHttpRequest, textStatus, errorThrows){}

		});

	});

[Kassak]

J'utilise déjà Jquery pour quelques trucs..mais sans avoir beaucoup poussé. Je manque cruellement de temps et donc me pencher sur un truc nouveau, demandant du temps, n'est pas possible pour moi.

Mais je vais faire un effort et tester ceci, de toute façon je pense que j'ai perdu assez de temps à essayer de toutes les manières possibles de faire ce que je veux faire, sans résultat ^^

Je vous tiens au jus. Merci

[Roworll]

J'ajouterai la dessus que le couple JQuery/JSON propose un moteur de template assez efficace pour le rendu (même s'il est encore en mode bêta pour le moment).

J'ai une petite démo en développement ici.
C'est une simple liste (à gauche) avec des dépendances (à droite) qui apparaissent quand on clique sur une ligne de la table principale.
Au dessus de la table de gauche se trouve une zone de saisie pour filtrer.

Dans cette démo, la liste de droite est construite avec ces quelques instructions (je schématise, le code actuel est plus complexe pour ajouter des évènements et travailler sur l'interface)

//Appel Ajax pour récupérer la liste au format JSON

$.get('../data/rpglist.php5?search='+$('#rpg_search').attr('value'), function(d) {

	//Parse du JSON

	var RpgList = jQuery.parseJSON( d );

	//Chargement du fichier de Template en asynchrone

	$.get('../template/rpglist.htm', function(template) {

		//Check les éventuelles erreurs

		if(!CheckErrors(RpgList)){

			// Le fichier de template est chargé, affichage des infos

			$.tmpl(template, RpgList['return'] ).appendTo('#RpgList');

		}

	});

});

L'objet que je reçois ressemble à ça.
Il est structuré de manière à renvoyer un code de retour et une description de l'éventuelle erreur

{

    "return": {

        "value": 0,

        "rpgs": [

            {

                "lastid": 0,

                "rows": 3,

                "rpg": [

                    {

                        "id": "177",

                        "name": "In Nomine Satanis / Magna Veritas",

                        "acc": "14"

                    },

                    {

                        "id": "299",

                        "name": "Infinite Domains",

                        "acc": "1"

                    },

                    {

                        "id": "292",

                        "name": "IronClaw",

                        "acc": "1"

                    }

                ]

            }

        ]

    }

};

En cas d'erreur, c'est quelque chose de ce genre

{

    "return": {

        "value": -1,

        "logcat": [

            {

                "cat": "Error",

                "logtag": [

                    {

                        "tag": "Rpg",

                        "logrow": [

                            {

                                "rowid": 0,

                                "evtid": 5,

                                "evtat": "10:04:01.586404",

                                "logtxt": [

                                    {

                                        "#text": "Vérifiez le filtre"

                                    }

                                ],

                                "logdet": [

                                    {

                                        "#text": "Aucun Résultat"

                                    }

                                ]

                            }

                        ]

                    }

                ]

            }

        ]

    }

}

rpglist.html est le template sur lequel s'appuie JQuery pour construire la page.
Il utilise une notation définie ici

<div class="tablespace">

	<div class="head-row">

		<div class="head-name"></div>

		<div class="head-acc"></div>

	</div>

	{{each(i,rpg) rpgs[0].rpg}}

		<div class="rpg-row" id="rpg_${rpg.id}"><div>${rpg.name}</div><div>${rpg.acc}</div></div>

	{{/each}}

</div>

Le code qui permet d'afficher les erreurs fonctionne sur le même principe

function CheckErrors(oVal){

	if(oVal['return']['value']==-1){

		//Erreur détectée dans la structure de retour



		// Récupération du template pour le message d'erreur

		$.get('../template/errorbox.htm', function(template) {

		

			//  Application du template et injection du résultat

			$.tmpl(template, oVal['return'] ).appendTo('body');

			

			$( "#dialog" ).dialog({

					resizable:false,

					modal:true,

					buttons: {

						"Ok": function() { 

							$(this).remove(); 

						} 

					}

			});

		});

		return true;

	} else {

		return false;

	}

}

Et voici le contenu de errorbox.htm

<div id="dialog" title="Message" >

	{{each(i,logcat) logcat}}

		{{if logcat.cat=='Error'}}

			{{each(i,logtag) logcat.logtag}}

				{{each(i,logrow) logtag.logrow}}

					<li>

						${logrow.logtxt[0]['#text']} : ${logrow.logdet[0]['#text']}

					</li>

				{{/each}}

			{{/each}}

		{{/if}}

	{{/each}}

</div>

Si ça vous intéresse, n'hésitez pas à jeter un œil sur les diverses sources de l'exemple que j'ai linkées plus haut.

[Edit]
J'ai modifié le code sur le site de manière à mettre les templates en cache au premier chargement.
Ça évite des requêtes inutiles vers le serveur à chaque actualisation.

[php_addict]

intéressant, par contre dans le premier lien que tu donnes, quand JS n'est pas activé alors rien ne s'affiche...