Symfony4

Symfony - Ajax Control

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

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

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

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

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

Шаг 1

Добавьте метод ajax в StudentController (src/AppBundle/Controller/StudentController.php)


/** 
 * @Route("/student/ajax") 
 */ 
public function ajax(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 в директории Student views, 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>  
   <table class = "table">  
      <tbody id = "student"></tbody>  
   </table>     
{% endblock %}

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

Шаг 3

Запустите приложение, http://localhost:8000/student/ajax и щелкните ссылку «Load student information».

Результат: начальная страница