Учебники

FuelPHP — Ajax

Сентябрь 3, 2018

AJAX — это современная технология в веб-программировании. Он предоставляет опции для отправки и получения данных на веб-странице асинхронно, без обновления страницы. Давайте узнаем о программировании FuelPHP AJAX в этой главе.

Каркас FuelPHP предоставляет опции для идентификации того, является ли тип запроса AJAX или нет. Для этого у входного класса есть метод is_ajax () . Если сделан запрос AJAX, метод Input :: is_ajax возвращает true , в противном случае — false .

Этот метод используется для правильной обработки AJAX-запроса на стороне сервера. 

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

Мы можем использовать json_encode для возврата ответа JSON. Мы можем объединить эти два метода, чтобы создать простое и понятное веб-приложение на основе AJAX.

Рабочий пример

Давайте добавим новую страницу ajax / index в приложение для сотрудников и попытаемся получить информацию о сотрудниках асинхронно.

Шаг 1 — Создайте новый контроллер Controller_Ajax в fuel / app / classes / controller / ajax.php. 

<?php  
   class Controller_Ajax extends Controller { 
   }

Шаг 2 — Создайте новое действие action_index следующим образом. 

<?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"); 
         } 
      } 
   }

Здесь, если запрос AJAX, мы выбираем информацию об ученике, кодируем ее как JSON и возвращаем. В противном случае мы просто визуализируем соответствующий вид.

Шаг 3 — Создайте соответствующий файл вида топлива / app / views / ajax / index.php следующим образом. 

<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>

Здесь мы создали тег привязки (id: loademployee) для загрузки информации о сотруднике с помощью вызова AJAX. Вызов AJAX выполняется с использованием JQuery. Событие, прикрепленное к тегу loademployee, активируется, когда пользователь щелкает по нему. Затем он извлекает информацию о сотруднике с помощью вызова AJAX и динамически генерирует необходимый HTML-код.

Шаг 4 — Запустите приложение.

Наконец, запустите приложение, http: // localhost: 8000 / ajax / index и перейдите на вкладку «Загрузить информацию о сотрудниках».

45
Share: