Symfony - Ajax Kontrolü
AJAX, web programlamada modern bir teknolojidir. Bir web sayfasındaki verileri sayfayı yenilemeden eşzamansız olarak göndermek ve almak için seçenekler sunar. Bu bölümde Symfony AJAX programlamayı öğrenelim.
Symfony çerçevesi, istek türünün AJAX olup olmadığını belirleme seçenekleri sunar. Symfony HttpFoundation bileşeninin istek sınıfı, bu amaç için isXmlHttpRequest () adlı bir yönteme sahiptir. Bir AJAX isteği yapılırsa, geçerli istek nesnesinin isXmlHttpRequest () yöntemi true, aksi takdirde false döndürür.
Bu yöntem, bir AJAX isteğini sunucu tarafında düzgün şekilde işlemek için kullanılır.
if ($request->isXmlHttpRequest()) {
// Ajax request
} else {
// Normal request
}
Symfony, yanıtı JSON formatında oluşturmak için JSON tabanlı bir Response sınıfı olan JsonResponse de sağlar. Basit ve temiz bir AJAX tabanlı web uygulaması oluşturmak için bu iki yöntemi birleştirebiliriz.
AJAX - Çalışma Örneği
Yeni bir sayfa ekleyelim, student/ajax öğrenci uygulamasında ve öğrenci bilgilerini eşzamansız olarak almaya çalışın.
Step 1 - StudentController'da (src / AppBundle / Controller / StudentController.php) ajaxAction yöntemini ekleyin.
/**
* @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');
}
}
Burada istek AJAX ise öğrenci bilgilerini alır, JSON olarak kodlar ve kullanarak iade ederiz. JsonResponsenesne. Aksi takdirde, sadece ilgili görünümü oluştururuz.
Step 2 - Bir görünüm dosyası oluşturun ajax.html.twig Öğrenci görünümleri dizininde, app/Resources/views/student/ ve aşağıdaki kodu ekleyin.
{% 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 %}
Burada, AJAX çağrısını kullanarak öğrenci bilgilerini yüklemek için bir bağlantı etiketi (id: loadstudent) oluşturduk. AJAX çağrısı JQuery kullanılarak yapılır. Loadstudent etiketine eklenen etkinlik, kullanıcı bunu tıkladığında etkinleşir. Daha sonra, AJAX çağrısını kullanarak öğrenci bilgilerini alacak ve gerekli HTML kodunu dinamik olarak üretecektir.
Step 3- Son olarak uygulamayı çalıştırın, http://localhost:8000/student/ajax ve Öğrenci bilgilerini yükle sekmesine tıklayın.