Symfony - Điều khiển Ajax

AJAX là một công nghệ hiện đại trong lập trình web. Nó cung cấp các tùy chọn để gửi và nhận dữ liệu trong trang web một cách không đồng bộ mà không cần làm mới trang. Chúng ta hãy học lập trình Symfony AJAX trong chương này.

Khung công tác Symfony cung cấp các tùy chọn để xác định loại yêu cầu có phải là AJAX hay không. Lớp request của thành phần Symfony HttpFoundation có một phương thức, isXmlHttpRequest () cho mục đích này. Nếu một yêu cầu AJAX được thực hiện, phương thức isXmlHttpRequest () của đối tượng yêu cầu hiện tại trả về true, ngược lại là false.

Phương pháp này được sử dụng để xử lý một yêu cầu AJAX đúng cách ở phía máy chủ.

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

Symfony cũng cung cấp một lớp Phản hồi dựa trên JSON, JsonResponse để tạo phản hồi ở định dạng JSON. Chúng ta có thể kết hợp hai phương pháp này để tạo một ứng dụng web dựa trên AJAX đơn giản và sạch sẽ.

AJAX - Ví dụ làm việc

Hãy để chúng tôi thêm một trang mới, student/ajax trong ứng dụng của sinh viên và cố gắng tìm nạp thông tin sinh viên một cách không đồng bộ.

Step 1 - Thêm phương thức ajaxAction trong 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'); 
   } 
}

Ở đây, nếu yêu cầu là AJAX, chúng tôi tìm nạp thông tin sinh viên, mã hóa nó thành JSON và trả lại bằng cách sử dụng JsonResponsevật. Nếu không, chúng tôi chỉ hiển thị chế độ xem tương ứng.

Step 2 - Tạo tệp xem ajax.html.twig trong thư mục Chế độ xem sinh viên, app/Resources/views/student/ và thêm mã sau.

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

Ở đây, chúng tôi đã tạo một thẻ liên kết (id: loadstudent) để tải thông tin học sinh bằng cách sử dụng lệnh gọi AJAX. Cuộc gọi AJAX được thực hiện bằng JQuery. Sự kiện được đính kèm với thẻ loadstudent sẽ kích hoạt khi người dùng nhấp vào nó. Sau đó, nó sẽ tìm nạp thông tin học sinh bằng cách gọi AJAX và tự động tạo ra mã HTML cần thiết.

Step 3- Cuối cùng, chạy ứng dụng, http://localhost:8000/student/ajax và nhấp vào tab neo Tải thông tin sinh viên.

Kết quả: Trang đầu tiên

Kết quả: Trang có thông tin sinh viên