CakePHP, submit formulario en petición AJAX

En este tutorial vamos a explicar como enviar un formulario al servidor mediante una petición AJAX. Primero crearemos el formulario utilizado los helpers de CakePHP, y luego haremos la llamada AJAX.

Creación del formulario CakePHP

Lo primero que debemos haces es crear el formulario que queremos enviar por AJAX al servidor. Para ello utilizaremos este código, que creará un formulario con dos campo, uno de texto y un desplegable con tres opciones:

 PHP | 
 copy code |
?
 
01
<?php
02
echo $this->Form->create('Ejemplo', array('id' => 'ejemploForm', 'default' => false));
03
 
04
$this->Form->input('nombre');
05
$this->Form->input('edad', array('options' => array_combine(range(18, 36, 1), range(18, 36, 1))));
06
 
07
echo $this->Form->end('Enviar');
08
?>
09
 
10
<div id="resultado"></div>

Con la opción “default=>false” indicamos que el botón del formulario no haga el submit, lo haremos nosotros vía ajax.

Controller CakePHP para recibir la petición

Creamos un controlador de ejemplo para recibir los datos de formulario por Ajax. Este controlador tiene un único método que comprobará si la petición recibida es vía Ajax, y de ser devolverá una frase con el nombre y la edad recibidas.

 PHP | 
 copy code |
?
 
01
<?php
02
class EjemploController extends AppController {
03
 
04
    function index(){
05
        $this->autoRender = false; // No renderiza mediate el fichero .ctp
06
        if($this->request->is('ajax')){ // Comprobar si es una petición ajax
07
 
08
            $nombre = $this->request->data['Ejemplo']['nombre'];
09
            $edad = $this->request->data['Ejemplo']['edad'];
10
 
11
            echo "La edad de ".$nombre." es ".$edad;
12
        }
13
    }
14
}
15
?>

Creación de la petición AJAX

Para realizar la petición ajax haremos uso del helper de CakePHP llamado “JSHelper“. Capturaremos el evento ‘submit’ del formulario y le asociaremos la llamada ajax, para que cada vez que se pulse sobre el botón del formulario, se ejecute esta función asíncronamente. Para este ejemplo tenemos utilizaremos el controlador anterior que tenemos creado en el servidor.

El código de la llamada sería el siguiente:

 PHP | 
 copy code |
?
 
01
<?php
02
$this->Js->get('#ejemploForm')->event('submit', $this->Js->request(array(
03
            'controller' => 'ejemplo',
04
            'action' => 'index'
05
                ), array(
06
            'update' => '#resultado',
07
            'evalScripts' => true,
08
            'async' => true,
09
            'method' => 'post',
10
            'dataExpression' => true,
11
            'data' => $this->Js->serializeForm(array('isForm' => true, 'inline' => true))
12
        ))
13
);
14
?>

Cada vez que se pulse el botón de submit del formulario, se realizará la llamada al servidor con los datos del formulario, y se recibirá la respuesta y se mostrará en el área identificada por “#resultado”.

Sobre David Otero

David Otero es uno de los creadores y desarrolladores que componen Developando. Puedes contactar con él en León, Zamora o Madrid.
Conoce a David Otero en Google+.

Find more about me on:
• 
• 
• 
•