par
sadeq » 25 sept. 2008, 00:04
On peut utiliser
prototype aussi qui intègre le support json et ajax.
Le principe est le suivant:
Côté PHP (version 5.2 et +) json est intégré et par défaut activé, on peut donc coder un array PHP au format json (ça c'est déjà fait) ok:
Voici donc l'exemple du serveur de notre tableau json. On l'appellera : jSonPricesArray.php
<?php
$prices = array(
array('price_range_bottomvalue'=>100, 'price_value'=>10),
array('price_range_bottomvalue'=>151, 'price_value'=>14),
array('price_range_bottomvalue'=>201, 'price_value'=>18),
);
echo json_encode($prices);
?>
Côté HTML, on a besoin du support Ajax pour appeler le service : jSonPricesArray.php et du support jSon pour mettre en forme le résultat retourné à Ajax.
Pour celà, on va utiliser le framework prototype (dernière version stable) ainsi pour démarrer un appel Ajax on va utiliser la fonction suivante:
Code : Tout sélectionner
function getPricesFromAjaxArray()
{
// on utilise ici les supports Ajax et json du framework prototype
new Ajax.Request("jSonPricesArray.php", { method:"get",
onSuccess: function(response){
showPrices (response.responseText.evalJSON()); //avec conversion de la réponse Ajax au format jSon
}
});
}
L'événement onSuccess se déclenche quand Ajax reçoit la réponse du service appelé. Réponse représentée par le paramètre "response".
La fonction attachée à l'événement onSuccess appelle, en fait, une autre fonction qu'on va écrire en lui passant comme paramètre la réponse Ajax (propriété "responseText") sans oublier de la formater au format jSon par la méthode "evalJSON()" de prototype.
La fonction showPrices(untableau) attend en entrée un tableau au format objet json de javascript qu'elle va parcourir de 0 à N (length du tableau) et afficher ses cases une par une. Voici comment:
Code : Tout sélectionner
function showPrices(prices)
{
var msg = '';
for(var i=0; i<prices.length; i++)
{
msg += ' - Prix bas : '+ prices[i].price_range_bottomvalue +'; Prix : '+ prices[i].price_value +'\n';
}
alert(msg);
}
Et voilà, c'est fini.
Pour démarrer le processus, il faut appeler en premier la fonction Ajax: getPricesFromAjaxArray()
Voici le récap du code HTML général:
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Échanges JSON PHP/JavaScript</title>
<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
<script type="text/javascript">
//Récupérer le tableau jSon par Ajax (données provenant d'un serveur PHP)
function getPricesFromAjaxArray()
{
// on utilise ici les supports Ajax et json du framework prototype
new Ajax.Request("jSonPricesArray.php", { method:"get",
onSuccess: function(response){
showPrices (response.responseText.evalJSON()); //avec conversion de la réponse Ajax au format jSon
}
});
}
//Afficher le tableau jSon
function showPrices(prices)
{
var msg = '';
for(var i=0; i<prices.length; i++)
{
msg += ' - Prix bas : '+ prices[i].price_range_bottomvalue +'; Prix : '+ prices[i].price_value +'\n';
}
alert(msg);
}
//Appel Ajax
getPricesFromAjaxArray();
</script>
</head>
<body>
</body>
</html>On peut utiliser [url=http://www.prototypejs.org/]prototype[/url] aussi qui intègre le support json et ajax.
Le principe est le suivant:
Côté PHP (version 5.2 et +) json est intégré et par défaut activé, on peut donc coder un array PHP au format json (ça c'est déjà fait) ok:
Voici donc l'exemple du serveur de notre tableau json. On l'appellera : jSonPricesArray.php
[php]<?php
$prices = array(
array('price_range_bottomvalue'=>100, 'price_value'=>10),
array('price_range_bottomvalue'=>151, 'price_value'=>14),
array('price_range_bottomvalue'=>201, 'price_value'=>18),
);
echo json_encode($prices);
?>[/php]
Côté HTML, on a besoin du support Ajax pour appeler le service : jSonPricesArray.php et du support jSon pour mettre en forme le résultat retourné à Ajax.
Pour celà, on va utiliser le framework prototype (dernière version stable) ainsi pour démarrer un appel Ajax on va utiliser la fonction suivante:
[code]function getPricesFromAjaxArray()
{
// on utilise ici les supports Ajax et json du framework prototype
new Ajax.Request("jSonPricesArray.php", { method:"get",
onSuccess: function(response){
showPrices (response.responseText.evalJSON()); //avec conversion de la réponse Ajax au format jSon
}
});
}[/code]
L'événement onSuccess se déclenche quand Ajax reçoit la réponse du service appelé. Réponse représentée par le paramètre "response".
La fonction attachée à l'événement onSuccess appelle, en fait, une autre fonction qu'on va écrire en lui passant comme paramètre la réponse Ajax (propriété "responseText") sans oublier de la formater au format jSon par la méthode "evalJSON()" de prototype.
La fonction showPrices(untableau) attend en entrée un tableau au format objet json de javascript qu'elle va parcourir de 0 à N (length du tableau) et afficher ses cases une par une. Voici comment:
[code]function showPrices(prices)
{
var msg = '';
for(var i=0; i<prices.length; i++)
{
msg += ' - Prix bas : '+ prices[i].price_range_bottomvalue +'; Prix : '+ prices[i].price_value +'\n';
}
alert(msg);
}
[/code]
Et voilà, c'est fini.
Pour démarrer le processus, il faut appeler en premier la fonction Ajax: getPricesFromAjaxArray()
[b]Voici le récap du code HTML général:[/b]
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Échanges JSON PHP/JavaScript</title>
<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
<script type="text/javascript">
//Récupérer le tableau jSon par Ajax (données provenant d'un serveur PHP)
function getPricesFromAjaxArray()
{
// on utilise ici les supports Ajax et json du framework prototype
new Ajax.Request("jSonPricesArray.php", { method:"get",
onSuccess: function(response){
showPrices (response.responseText.evalJSON()); //avec conversion de la réponse Ajax au format jSon
}
});
}
//Afficher le tableau jSon
function showPrices(prices)
{
var msg = '';
for(var i=0; i<prices.length; i++)
{
msg += ' - Prix bas : '+ prices[i].price_range_bottomvalue +'; Prix : '+ prices[i].price_value +'\n';
}
alert(msg);
}
//Appel Ajax
getPricesFromAjaxArray();
</script>
</head>
<body>
</body>
</html>[/code]
