Chiamate Ajax con Yii

Appena cimentato nel mondo Yii sono rimasto colpito dalla semplicità con cui si effettuano chiamate ajax. In questo breve articolo passerò subito al sodo illustrandovi un prototipo di chiamata asincrona in pochi semplici passi su un semplicissimo caso di studio utilizzando javascript e php: la chiamata ajax avverrà sommando una costante di 100 ad un numero raggiunto in input. Chiamerò il metodo “addNumber”.

Divido lo sviluppo in 3 semplici fasi:

1. implementazione dell’azione nel controller;
2. chiamata ajax nella view con la classe Chtml;
3. gestione della risposta con javascript.

Controller

Istanzio l’azione nel controller preposto a governare la view e aggiungo nella funzione pubblica accessRule, il metodo preposto nella dichiarazione di un’azione Yii.

array('allow', 'actions'=>array('index','view','addNumber', 'export'),
	       'users'=>array('*'),
),

Successivamente realizzo la funzione che conterrà la logica (in questo caso banale):

public function actionAddNumber($number)
{
   $ret = $number + 100;
   echo json_encode(array('ret' => $ret));
}

Chiamata Ajax con Chtml

Sistemata la parte di “settaggio”, definito un punto d’accesso (accessRule) e implementata la logica della risposta possiamo passare alla chiamata vera e propria che, come anticipato verrà realizzata grazie al metodo Ajax della classe Chtml.

Supponiamo che al click di un pulsante scaturirà la chiamata asincrona, per cui:

jQuery('.pulsante').click(function(){
     addNumber(10);
});

function addNumber(number)
{
    CController::createUrl('//MyController/sayHello'),
        'data'=>array(
            'messaggio'=>'js:number'
        ),
        'type'=>'post',
        'dataType'=>'json',
        'success' => 'fn_success'
    ));
    ?>
}

In questa funzione javascript eseguo una chiamata nella quale specifico:

• url: l’azione di riferimento nel controller;
• data: eventuali variabili da passare alla chiamata, nel nostro caso il numero da addizionare;
• type e dataType: il metodo con cui effettuare la chiamata e il formato di ritorno;
• success: la funzione javascript di ritorno;

Gestione della risposta

La funzione javascript di ritorno gestirà la risposta della somma.

function fn_success(data)
{
   alert('il totale è: ' + data);
}

In pochi semplici passi abbiamo imparato a gestire una chiamata asincrona con Yii.