Symfony-ajax-control
Symfony-Ajaxコントロール
AJAXは、Webプログラミングの最新技術です。 ページを更新することなく、Webページ内のデータを非同期で送受信するオプションを提供します。 この章でSymfony AJAXプログラミングを学びましょう。
symfonyフレームワークは、リクエストタイプがAJAXであるかどうかを識別するオプションを提供します。 Symfony HttpFoundationコンポーネントのリクエストクラスには、この目的のためのメソッドisXmlHttpRequest（）があります。 AJAX要求が行われた場合、現在の要求オブジェクトのisXmlHttpRequest（）メソッドはtrueを返し、そうでない場合はfalseを返します。
このメソッドは、サーバー側でAJAX要求を適切に処理するために使用されます。
if ($request->isXmlHttpRequest()) {
//Ajax request
} else {
//Normal request
}Symfonyは、JSON形式のレスポンスを作成するためのJSONベースのレスポンスクラスJsonResponseも提供します。 これら2つの方法を組み合わせて、シンプルでクリーンな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/ajaxl.twig');
}
}ここで、リクエストがAJAXの場合、生徒情報を取得し、JSONとしてエンコードし、 JsonResponse オブジェクトを使用して返します。 それ以外の場合は、対応するビューをレンダリングするだけです。
手順2 *-Studentビューディレクトリ *app/Resources/views/student/ にビューファイル ajaxl.twig を作成し、次のコードを追加します。
{% extends 'basel.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')l('');
$('#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)l(student['name']);
$('#address', e)l(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を使用して行われます。 ユーザーがクリックすると、loadstudentタグに関連付けられたイベントがアクティブになります。 次に、AJAX呼び出しを使用して生徒情報を取得し、必要なHTMLコードを動的に生成します。
ステップ3-最後に、アプリケーション http：//localhost：8000/student/ajax を実行し、[学生情報の読み込み]アンカータブをクリックします。
