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 を実行し、[学生情報の読み込み]アンカータブをクリックします。

結果：最初のページ

Ajaxコントロールの初期ページ

結果：学生情報のあるページ

Ajax Control最終ページ

Symfony-ajax-control

Symfony-Ajaxコントロール

AJAX-作業例

結果：最初のページ

結果：学生情報のあるページ

目次