CarburantPHP - 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. Découvrons la programmation de FuelPHP AJAX dans ce chapitre.

Le framework FuelPHP fournit des options pour identifier si le type de demande est AJAX ou non. La classe d'entrée a une méthode,is_ajax()dans ce but. Si une demande AJAX est faite,Input::is_ajax retourne la méthode true, autrement false.

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

if (Input::is_ajax()) {  
   // Ajax request  
} else {  
   // Normal request  
}

On peut utiliser json_encodepour renvoyer la réponse JSON. Nous pouvons combiner ces deux méthodes pour créer une application Web basée sur AJAX simple et propre.

Exemple de travail

Ajoutons une nouvelle page, ajax/index dans l'application des employés et essayez de récupérer les informations de l'employé de manière asynchrone.

Step 1 - Créez un nouveau contrôleur, Controller_Ajax dans fuel / app / classes / controller / ajax.php.

<?php  
   class Controller_Ajax extends Controller { 
   }

Step 2- Créez une nouvelle action, action_index comme suit.

<?php  
   class Controller_Ajax extends Controller { 
      public function action_index() { 
         $emps = model_employee::find('all'); 
         $data = array(); 
         $i = 0; 
         
         foreach($emps as $emp) { 
            $data[$i] = array(); 
            $data[$i]['name'] = $emp['name']; 
            $data[$i]['age'] = $emp['age'];  
            $i = $i + 1; 
         }  
         if(\Input::is_ajax()) { 
            echo json_encode($data); 
         } else { 
            return \View::forge("ajax/index"); 
         } 
      } 
   }

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

Step 3 - Créer le fichier de vue correspondant, fuel/app/views/ajax/index.php comme suit.

<html>
   <head>
      <script language = "javascript" src = "/assets/js/jquery-3.2.1.min.js"></script>
      
      <style>
         .table { border-collapse: collapse; }
         .table th, td {
            border-bottom: 1px solid #ddd;
            width: 250px;
            text-align: left;
            align: left;
         }
      </style>
   </head>
   
   <body>
      <a id = "loademployee" href = "#">Load employee information</a>
      </br> 
      </br>

      <table class = "table">
         <tbody id = "employee">
         </tbody>
      </table>
      
      <script language = "javascript">
         $(document).ready(function() {
            $("#loademployee").on("click", function(event) {
               $.ajax ({
                  url:        '/ajax/index',
                  type:       'POST',
                  dataType:   'json',
                  async:      true,

                  success: function(data, status) {
                     var e = $('<tr><th>Name</th><th>Age</th></tr>');
                     $('#employee').html('');
                     $('#employee').append(e);
                     
                     for(i = 0; i < data.length; i++) {
                        employee = data[i];
                        var e = $('<tr><td id = "name"></td><td id = "age"></td></tr>');
                        $('#name', e).html(employee['name']);
                        $('#age', e).html(employee['age']);
                        $('#employee').append(e);
                     }
                  },
                  
                  error : function(xhr, textStatus, errorThrown) {
                     alert('Ajax request failed.');
                  }
               });
            });  
         });
      </script>
   </body>
   
</html>

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

Step 4 - Lancez l'application.

Enfin, lancez l'application, http://localhost:8000/ajax/index et cliquez sur l'onglet d'ancrage Charger les informations sur les employés.

Résultat