FuelPHP-Ajax

AJAXは、Webプログラミングの最新技術です。ページを更新することなく、Webページ内のデータを非同期で送受信するオプションを提供します。この章では、FuelPHP AJAXプログラミングについて学びましょう。

FuelPHPフレームワークは、リクエストタイプがAJAXであるかどうかを識別するオプションを提供します。入力クラスには、この目的のための* is_ajax（）*メソッドがあります。 AJAXリクエストが行われた場合、 *Input: is_ajax* メソッドは true を返し、そうでない場合は false を返します。

このメソッドは、サーバー側でAJAX要求を適切に処理するために使用されます。

if (Input::is_ajax()) {
  //Ajax request
} else {
  //Normal request
}

*json_encode* を使用してJSONレスポンスを返すことができます。 これら2つの方法を組み合わせて、シンプルでクリーンなAJAXベースのWebアプリケーションを作成できます。

実施例

従業員アプリケーションに新しいページ ajax/index を追加し、従業員情報を非同期に取得してみましょう。

ステップ1 *-新しいコントローラーController_Ajaxをfuel/app/classes/controller/ajax.phpに作成します。

<?php
   class Controller_Ajax extends Controller {
   }

ステップ2 *-次のように新しいアクション_action_index_を作成します。

<?php
   class Controller_Ajax extends Controller {
      public function action_index() {
         $emps = model_employee::find('all');
         $data = array();
         $i = 0;

         foreach($emps as $emp) {
            $data[$i] = array();
            $data[$i]['name'] = $emp['name'];
            $data[$i]['age'] = $emp['age'];
            $i = $i + 1;
         }
         if(\Input::is_ajax()) {
            echo json_encode($data);
         } else {
            return \View::forge("ajax/index");
         }
      }
   }

ここで、リクエストがAJAXの場合、学生情報を取得し、JSONとしてエンコードして、返します。それ以外の場合は、対応するビューをレンダリングするだけです。

ステップ3 *-対応するビューファイル *fuel/app/views/ajax/index.php を次のように作成します。

<html>
   <head>
      <script language = "javascript" src = "/assets/js/jquery-3.2.1.min.js"></script>

      <style>
         .table { border-collapse: collapse; }
         .table th, td {
            border-bottom: 1px solid #ddd;
            width: 250px;
            text-align: left;
            align: left;
         }
      </style>
   </head>

   <body>
      <a id = "loademployee" href = "#">Load employee information</a>
      </br>
      </br>

      <table class = "table">
         <tbody id = "employee">
         </tbody>
      </table>

      <script language = "javascript">
         $(document).ready(function() {
            $("#loademployee").on("click", function(event) {
               $.ajax ({
                  url:        '/ajax/index',
                  type:       'POST',
                  dataType:   'json',
                  async:      true,

                  success: function(data, status) {
                     var e = $('<tr><th>Name</th><th>Age</th></tr>');
                     $('#employee')l('');
                     $('#employee').append(e);

                     for(i = 0; i < data.length; i++) {
                        employee = data[i];
                        var e = $('<tr><td id = "name"></td><td id = "age"></td></tr>');
                        $('#name', e)l(employee['name']);
                        $('#age', e)l(employee['age']);
                        $('#employee').append(e);
                     }
                  },

                  error : function(xhr, textStatus, errorThrown) {
                     alert('Ajax request failed.');
                  }
               });
            });
         });
      </script>
   </body>

</html>

ここでは、AJAX呼び出しを使用して従業員情報を読み込むためのアンカータグ（id：loademployee）を作成しました。 AJAX呼び出しは、JQueryを使用して行われます。ユーザーがクリックすると、loademployeeタグに関連付けられたイベントがアクティブになります。次に、AJAX呼び出しを使用して従業員情報を取得し、必要なHTMLコードを動的に生成します。

ステップ4 *-アプリケーションを実行します。

最後に、アプリケーション http：//localhost：8000/ajax/index を実行し、[従業員情報の読み込み]アンカータブをクリックします。

結果

アンカータブ

Fuelphp-ajax

FuelPHP-Ajax

実施例

結果