Play フレームワークにおける Ajax

Play フレームワークは、はじめから jQuery を含めてリリースされており、簡単に Ajax リクエストを行うことができます。このセクションは、どのようにして Play フレームワークにおいて jQuery を効率的に使用するかについて記載します。

Play フレームワークには、コントローラから透過的にメソッド定義を取得する、手軽な jsAction タグも含まれています。

jQuery を jsAction タグと使う

この #{jsAction /} タグは、サーバアクションに基づいた URL と自由な変数から成る JavaScript 関数を返却します。この関数では AJAX リクエストを行わないので、返却された URL を使って手作業で Ajax リクエストを実行する必要があります。

例を見てみましょう:

GET     /hotels/list        Hotels.list

クライアント側でこのルートをインポートすることができます:

<script type="text/javascript">
   var listAction = #{jsAction @list(':search', ':size', ':page') /}
   $('#result').load(listAction({search: 'x', size: '10', page: '1'}), function() {
       $('#content').css('visibility', 'visible')
   })
</script>

この例では、デフォルトの Application コントローラの list メソッドを指定しています。3 つの引数: search、size そして page も渡しています。この実行結果は listAction 変数に保存されます。ここで、jQuery と load 関数を使ってリクエスト (実際には HTTP GET リクエスト) を実行します。

実際のところ、以下のリクエストが発行されます:

GET /hotels/list?search=x&size=10&page=1

このケースでは、発行したリクエストは HTML データを返します。

jQuery にデータを解釈させるために JSON または XML を返すことも可能です。コントローラで適切な render メソッド (renderJSON、renderXML または XML テンプレート) を使用してください。

より詳しい情報については、jQuery ドキュメントを参照してください。

jQuery メソッドを以下のように変更することで POST も発行できることに注意してください:

$.post(listAction, function(data) {
  $('#result').html(data);
});