Symfony - Control Ajax

AJAX es una tecnología moderna en programación web. Proporciona opciones para enviar y recibir datos en una página web de forma asincrónica, sin actualizar la página. Aprendamos a programar Symfony AJAX en este capítulo.

El framework Symfony proporciona opciones para identificar si el tipo de solicitud es AJAX o no. La clase de solicitud del componente Symfony HttpFoundation tiene un método, isXmlHttpRequest () para este propósito. Si se realiza una solicitud AJAX, el método isXmlHttpRequest () del objeto de solicitud actual devuelve verdadero; de lo contrario, falso.

Este método se usa para manejar una solicitud AJAX correctamente en el lado del servidor.

if ($request->isXmlHttpRequest()) {  
   // Ajax request  
} else {  
   // Normal request  
}

Symfony también proporciona una clase de respuesta basada en JSON, JsonResponse, para crear la respuesta en formato JSON. Podemos combinar estos dos métodos para crear una aplicación web basada en AJAX simple y limpia.

AJAX - Ejemplo de trabajo

Agreguemos una nueva página, student/ajax en la aplicación del estudiante e intente obtener la información del estudiante de forma asincrónica.

Step 1 - Agregue el método ajaxAction en StudentController (src / AppBundle / Controller / StudentController.php).

/** 
   * @Route("/student/ajax") 
*/ 
public function ajaxAction(Request $request) {  
   $students = $this->getDoctrine() 
      ->getRepository('AppBundle:Student') 
      ->findAll();  
      
   if ($request->isXmlHttpRequest() || $request->query->get('showJson') == 1) {  
      $jsonData = array();  
      $idx = 0;  
      foreach($students as $student) {  
         $temp = array(
            'name' => $student->getName(),  
            'address' => $student->getAddress(),  
         );   
         $jsonData[$idx++] = $temp;  
      } 
      return new JsonResponse($jsonData); 
   } else { 
      return $this->render('student/ajax.html.twig'); 
   } 
}

Aquí, si la solicitud es AJAX, obtenemos la información del estudiante, la codificamos como JSON y la devolvemos usando JsonResponseobjeto. De lo contrario, simplemente renderizamos la vista correspondiente.

Step 2 - Crear un archivo de vista ajax.html.twig en el directorio de vistas de estudiantes, app/Resources/views/student/ y agregue el siguiente código.

{% extends 'base.html.twig' %} 
{% block javascripts %} 
   <script language = "javascript" 
      src = "https://code.jquery.com/jquery-2.2.4.min.js"></script> 
   
   <script language = "javascript">  
      $(document).ready(function(){   
         $("#loadstudent").on("click", function(event){  
            $.ajax({  
               url:        '/student/ajax',  
               type:       'POST',   
               dataType:   'json',  
               async:      true,  
               
               success: function(data, status) {  
                  var e = $('<tr><th>Name</th><th>Address</th></tr>');  
                  $('#student').html('');  
                  $('#student').append(e);  
                  
                  for(i = 0; i < data.length; i++) {  
                     student = data[i];  
                     var e = $('<tr><td id = "name"></td><td id = "address"></td></tr>');
                     
                     $('#name', e).html(student['name']);  
                     $('#address', e).html(student['address']);  
                     $('#student').append(e);  
                  }  
               },  
               error : function(xhr, textStatus, errorThrown) {  
                  alert('Ajax request failed.');  
               }  
            });  
         });  
      });  
   </script> 
{% endblock %}  

{% block stylesheets %} 
   <style> 
      .table { border-collapse: collapse; } 
      .table th, td { 
         border-bottom: 1px solid #ddd; 
         width: 250px; 
         text-align: left; 
         align: left; 
      } 
   </style> 
{% endblock %} 

{% block body %} 
   <a id = "loadstudent" href = "#">Load student information</a>  
   </br> 
   </br>  
   
   <table class = "table">  
      <tbody id = "student"></tbody>  
   </table>     
{% endblock %}

Aquí, hemos creado una etiqueta de anclaje (id: loadstudent) para cargar la información del estudiante usando la llamada AJAX. La llamada AJAX se realiza mediante JQuery. El evento adjunto a la etiqueta loadstudent se activa cuando un usuario hace clic en él. Luego, obtendrá la información del estudiante mediante la llamada AJAX y generará el código HTML requerido de forma dinámica.

Step 3- Finalmente, ejecuta la aplicación, http://localhost:8000/student/ajax y haga clic en la pestaña de anclaje Cargar información del estudiante.

Resultado: página inicial

Resultado: página con información del estudiante