Symfony - Contrôle Ajax

AJAX est une technologie moderne de programmation Web. Il fournit des options pour envoyer et recevoir des données dans une page Web de manière asynchrone, sans actualiser la page. Apprenons la programmation Symfony AJAX dans ce chapitre.

Le framework Symfony fournit des options pour identifier si le type de requête est AJAX ou non. La classe de requête du composant Symfony HttpFoundation a une méthode, isXmlHttpRequest () à cet effet. Si une requête AJAX est effectuée, la méthode isXmlHttpRequest () de l'objet de requête actuel renvoie true, sinon false.

Cette méthode est utilisée pour gérer correctement une requête AJAX côté serveur.

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

Symfony fournit également une classe Response basée sur JSON, JsonResponse pour créer la réponse au format JSON. Nous pouvons combiner ces deux méthodes pour créer une application Web basée sur AJAX simple et propre.

AJAX - Exemple de travail

Ajoutons une nouvelle page, student/ajax dans l'application étudiant et essayez de récupérer les informations de l'élève de manière asynchrone.

Step 1 - Ajout de la méthode ajaxAction dans 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'); 
   } 
}

Ici, si la requête est AJAX, nous récupérons les informations de l'étudiant, les encodons en JSON et les retournons en utilisant JsonResponseobjet. Sinon, nous rendons simplement la vue correspondante.

Step 2 - Créer un fichier de vue ajax.html.twig dans le répertoire des vues des étudiants, app/Resources/views/student/ et ajoutez le code suivant.

{% 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 %}

Ici, nous avons créé une balise d'ancrage (id: loadstudent) pour charger les informations de l'étudiant à l'aide de l'appel AJAX. L'appel AJAX est effectué à l'aide de JQuery. L'événement associé à la balise loadstudent s'active lorsqu'un utilisateur clique dessus. Ensuite, il récupérera les informations de l'étudiant à l'aide de l'appel AJAX et générera le code HTML requis de manière dynamique.

Step 3- Enfin, lancez l'application, http://localhost:8000/student/ajax et cliquez sur l'onglet Charger les informations sur les élèves.

Résultat: page initiale

Résultat: Page avec des informations sur l'étudiant