Учебники

Symfony — Ajax Control

Ноябрь 17, 2018

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

Платформа Symfony предоставляет опции для идентификации того, является ли тип запроса AJAX или нет. Класс запроса компонента Symfony HttpFoundation имеет метод isXmlHttpRequest () для этой цели. Если сделан запрос AJAX, метод isXmlHttpRequest () объекта текущего запроса возвращает true, в противном случае — false.

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

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

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

AJAX — рабочий пример

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

Шаг 1 — Добавьте метод ajaxAction в 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'); 
   } 
}

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

Шаг 2 — Создайте файл представления ajax.html.twig в каталоге представлений учеников, app / Resources / views / student / и добавьте следующий код. 

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

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

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

45
Share: