Peticiones Ajax con Symfony 3
Peticiones Ajax con Symfony 3

En este tutorial vamos a ver cómo podemos crear peticiones Ajax con Symfony 3, veremos un ejemplo completo utilizando el método GET, veremos cómo añadir jQuery a Symfony, realizar peticiones utilizando $.ajax de jQuery, recibir la petición en el servidor y comprobar si es ajax y que verbo solicita, hacer uso del componente Serializer para convertir una entidad de Doctrine en un string con formato JSON, también veremos cómo utilizar la clase JsonResponse para devolver una respuesta en formato JSON utilizando las ventajas de Symfony y finalmente veremos cómo recibir esa respuesta en el cliente, parsearla y pintarla en el DOM.

No hace falta decir que tener buena mano con jQuery y demás librerías te abre una inmensidad de puertas de cara a un futuro laboral, por lo tanto debe ser una herramienta que todos sepamos manejar lo mejor posible.

Los siguientes tutoriales y cursos te pueden interesar.

Peticiones Ajax con Symfony 3

Lo primero que debes tener es una entidad para poder trabajar, yo voy a utilizar la entidad Post que hemos estado utilizando en anteriores tutoriales de Symfony, por si acaso aquí dejo el código de la entidad.

Añadir jQuery a Symfony

Para añadir jQuery a Symfony vamos a utilizar Bower, si no lo tienes instalado es un buen momento, una vez hecho necesitamos crear en la raíz del proyecto un archivo llamado .bowerrc con el siguiente código.


Eso le dirá a Bower donde debe instalar todas las dependencias, es una forma de mantener la estructura de Symfony y no alterar nada.

Ahora sólo debemos ejecutar el siguiente comando desde la terminal para instalar bootstrap ya que también tiene la dependencia de jQuery, por lo tanto, ambos serán instalados.


Teniendo ya jQuery en nuestro proyecto crea un controlador llamado Ajax, por ejemplo, y añade el siguiente método, de momento sólo mostraremos una template, recuerda crearla también.

Petición GET con Ajax en Symfony 3

Ahora debemos abrir la template relacionada con el método indexAction y añadir el siguiente código.


Con la función asset de Twig obtenemos la librería jQuery haciendo uso del bloque javascripts, después sólo creamos un tag script donde realizamos una petición ajax y hacemos unas pequeñas comprobaciones, espero que esa parte del código más o menos esté clara.

Cómo puedes hacemos uso de la propiedad url de $.ajax para decirle que la url a la que tiene que hacer la petición es {{ url(‘ajax_posts’) }}, por lo tanto, tenemos que crear una ruta y asociarle ese nombre, así que volvemos al controlador Ajax y añadimos el siguiente método donde se cuece todo.


Gracias a la anotación @Method le decimos a esta ruta que sólo obedezca a peticiones GET, después comprobamos si es una petición ajax utilizando la clase Request, finalmente viene la magia de Symfony, con estas tres líneas.


De esta forma Symfony se encargará de serializar la entidad Post, en este caso en formato json gracias a la línea.


El resto creo que lo podemos entender de forma sencilla, IMPORTANTE es pasarle al array $encoders una nueva instancia de JsonEncoder, de otra forma los datos que devuelve Doctrine no podrán ser serializados en este caso a formato JSON.

Y así de sencillo es empezar a trabajar con Ajax en Symfony 3 serializando entidades de Doctrine, espero que te haya gustado y si es así comparte el post.