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 并单击加载学生信息锚点选项卡。
结果：初始页面
结果：带有学生信息的页面
