सिम्फनी - अजाक्स नियंत्रण

AJAX वेब प्रोग्रामिंग में एक आधुनिक तकनीक है। यह पृष्ठ को ताज़ा किए बिना, एक वेबपृष्ठ में डेटा भेजने और प्राप्त करने के विकल्प प्रदान करता है। आइए इस अध्याय में सिम्फनी AJAX प्रोग्रामिंग सीखें।

सिम्फनी फ्रेमवर्क पहचान के विकल्प प्रदान करता है कि अनुरोध प्रकार AJAX है या नहीं। सिम्फनी HttpFoundation घटक के अनुरोध वर्ग में इस उद्देश्य के लिए एक विधि, isXmlHttpRequest () है। यदि AJAX अनुरोध किया जाता है, तो वर्तमान अनुरोध वस्तु का isXmlHttpRequest () विधि सही है, अन्यथा गलत है।

इस विधि का उपयोग सर्वर साइड में AJAX अनुरोध को ठीक से संभालने के लिए किया जाता है।

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

सिम्फनी JSON प्रारूप में प्रतिक्रिया बनाने के लिए JSON आधारित रिस्पॉन्स क्लास, JsonResponse भी प्रदान करता है। हम एक सरल और साफ AJAX आधारित वेब एप्लिकेशन बनाने के लिए इन दो तरीकों को जोड़ सकते हैं।

AJAX - कार्य उदाहरण

हमें एक नया पेज जोड़ने दें, student/ajax छात्र आवेदन में और अतुल्यकालिक रूप से छात्र जानकारी प्राप्त करने का प्रयास करें।

Step 1 - StudentController में ajaxAction मेथड जोड़ें (src / AppBundle / कंट्रोलर / 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वस्तु। अन्यथा, हम सिर्फ इसी दृश्य को प्रस्तुत करते हैं।

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

यहां, हमने AJAX कॉल का उपयोग करके छात्र की जानकारी लोड करने के लिए एक एंकर टैग (id: loadstudent) बनाया है। AJAX कॉल JQuery का उपयोग करके किया जाता है। लोडस्टूडेंट टैग से जुड़ी घटना तब सक्रिय हो जाती है जब उपयोगकर्ता इसे क्लिक करता है। फिर, यह AJAX कॉल का उपयोग करके छात्र की जानकारी प्राप्त करेगा और गतिशील रूप से आवश्यक HTML कोड उत्पन्न करेगा।

Step 3- अंत में, एप्लिकेशन चलाएँ, http://localhost:8000/student/ajax और लोड छात्र सूचना एंकर टैब पर क्लिक करें।

परिणाम: प्रारंभिक पृष्ठ

परिणाम: छात्र की जानकारी वाला पेज