Documentation

Vue JSON

Table des matières 

Présentation

De plus en plus de sites web s'éloignent du modèle statique classique selon lequel chaque interaction entraine un rafraichissement de la page. De nos jours, les applications web contiennent du code Javascript qui communique avec le serveur par le biais de la technologie AJAX.

Concrètement, le code Javascript envoi des requêtes au serveur (souvent en utilisant une bibliothèque telle que jQuery), qui en retour envoie un flux de données sérialisées en JSON facilement utilisable par l'application cliente.

Utilisation

Imaginons un bout de code Javascript qui enverrait des informations au serveur, et utiliserait les données retournées pour modifier la page HTML. Dans l'exemple suivant, nous utilisons la bibliothèque jQuery pour la connexion au serveur et la manipulation HTML :

// définition de l'URL de connexion, en y plaçant un paramètre
var url = "/api/getUser/" + userId;

// envoi de la requête
$.getJSON(url, function(response) {
    // traitement du retour
    if (!response) {
        // erreur de communication
        alert("Communication error.");
    } else {
        // on écrit le nom de l'utilisateur dans un DIV
        $("#div-username").html(response.name);
    }
});

Cette requête pourrait être traitée par un contrôleur qui diffère très peu des contrôleurs habituels :

class ApiController extends \Temma\Web\Controller {
    public function getUser(int $id) {
        // enregistrement des données qui vont être
        // envoyées dans le flux JSON
        $this['json'] = [
            'name' => 'Albert Einstein',
            'type' => 'genius',
        ];

        // définition de la vue à utiliser
        $this->_view('\Temma\Views\Json');
    }
}
  • Lignes 5 à 8 : Les données à envoyer dans le flux JSON sont définies en les affectant à la variable json.
  • Ligne 11 : On spécifie que la vue à utiliser pour les données sortantes est la vue JSON (et non pas la vue Smarty habituelle).

À noter : La vue JSON n'a évidemment pas besoin de templates, dans la mesure où ce sont les données PHP qui sont directement sérialisées.

Précédent : Vue Smarty
Suivant : Vue CSV

Table des matières