Symfony Ajax控件

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的Web应用程序。

AJAX - 工作示例

让我们在学生申请中添加一个新页面 student / ajax ，并尝试异步获取学生信息。

第1步 - 在StudentController（src / AppBundle / Controller / StudentController.php）中添加ajaxAction方法。

/**
   * @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步 - 在学生视图目录 app / Resources / views / student /中 创建视图文件 ajax.html.twig 并添加以下代码。 **

{%  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 并单击加载学生信息锚点选项卡。

结果：初始页面

Ajax控制初始页面

结果：带有学生信息的页面

Ajax控制最终页面