Symfony - Ajax 控制

AJAX 是 Web 程式設計中的一項現代技術。它提供在網頁中非同步傳送和接收資料的選擇，而無需重新整理頁面。在本章中，讓我們學習 Symfony AJAX 程式設計。

Symfony 框架提供了識別請求型別是否為 AJAX 的選項。Symfony HttpFoundation 元件的 Request 類為此目的提供了一個方法 isXmlHttpRequest()。如果發出了 AJAX 請求，則當前請求物件的 isXmlHttpRequest() 方法返回 true，否則返回 false。

此方法用於在伺服器端正確處理 AJAX 請求。

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

Symfony 還提供了一個基於 JSON 的響應類 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 - 最後，執行應用程式 https://:8000/student/ajax 並點選“載入學生資訊”錨標籤。

結果：初始頁面

結果：包含學生資訊的頁面

列印頁面