Symfony - Ajax Control

AJAX è una moderna tecnologia nella programmazione web. Fornisce opzioni per inviare e ricevere dati in una pagina Web in modo asincrono, senza aggiornare la pagina. Impariamo a programmare in Symfony AJAX in questo capitolo.

Il framework Symfony fornisce opzioni per identificare se il tipo di richiesta è AJAX o meno. La classe Request del componente HttpFoundation di Symfony ha un metodo, isXmlHttpRequest () per questo scopo. Se viene effettuata una richiesta AJAX, il metodo isXmlHttpRequest () dell'oggetto richiesta corrente restituisce true, altrimenti false.

Questo metodo viene utilizzato per gestire correttamente una richiesta AJAX sul lato server.

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

Symfony fornisce anche una classe di risposta basata su JSON, JsonResponse per creare la risposta in formato JSON. Possiamo combinare questi due metodi per creare un'applicazione web basata su AJAX semplice e pulita.

AJAX - Esempio di lavoro

Aggiungiamo una nuova pagina, student/ajax nell'applicazione studente e prova a recuperare le informazioni sullo studente in modo asincrono.

Step 1 - Aggiungi il metodo ajaxAction in 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'); 
   } 
}

Qui, se la richiesta è AJAX, recuperiamo le informazioni sugli studenti, le codifichiamo come JSON e le restituiamo utilizzando JsonResponseoggetto. Altrimenti, eseguiamo semplicemente il rendering della vista corrispondente.

Step 2 - Crea un file di visualizzazione ajax.html.twig nella directory delle visualizzazioni degli studenti, app/Resources/views/student/ e aggiungi il codice seguente.

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

Qui, abbiamo creato un tag di ancoraggio (id: loadstudent) per caricare le informazioni sugli studenti utilizzando la chiamata AJAX. La chiamata AJAX viene eseguita utilizzando JQuery. L'evento allegato al tag loadstudent si attiva quando un utente fa clic su di esso. Quindi, recupererà le informazioni sugli studenti utilizzando la chiamata AJAX e genererà dinamicamente il codice HTML richiesto.

Step 3- Infine, esegui l'applicazione, http://localhost:8000/student/ajax e fai clic sulla scheda Carica ancora le informazioni sullo studente.

Risultato: pagina iniziale

Risultato: pagina con informazioni sugli studenti